生活随笔
收集整理的這篇文章主要介紹了
小程序colorui引入与使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 在小程序的組件庫里面，colorui的效果還是非常不錯，擁有非常多的輪子
colorui的示例
- 在github下載colorui包，其中demo文件夾為小程序文件，可以直接導入到微信開發工具直接運行，目錄結構如下，運行效果如上圖，可以查看各個模塊的效果
colorui引入小程序
- 新建小程序，將colorui文件拷貝到小程序根目錄，在app.wxss中引入
@import
'colorui/main.wxss';
@import
'colorui/icon.wxss';
@import
'colorui/animation.wxss';
- 查看示例的tabbar寫法，示例index.wxml，js文件就不貼了
- 小程序默認設置為index頁面，tabbar默認顯示，點擊修改PageCur的值，上面寫上組件，顯示PageCur對應的組件，就完成了頁面切換
<basics wx
:if="{{PageCur=='basics'}}"></basics
>
<component wx
:if="{{PageCur=='component'}}"></component
>
<plugin wx
:if="{{PageCur=='plugin'}}"></plugin
>
<about wx
:if="{{PageCur=='about'}}"></about
><view
class="cu-bar tabbar bg-white shadow foot"><view
class="action" bindtap
="NavChange" data
-cur
="basics"><view
class='cuIcon-cu-image'><image src
="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image
></view
><view
class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素
</view
></view
><view
class="action" bindtap
="NavChange" data
-cur
="component"><view
class='cuIcon-cu-image'><image src
="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image
></view
><view
class="{{PageCur=='component'?'text-green':'text-gray'}}">組件
</view
></view
><view
class="action" bindtap
="NavChange" data
-cur
="plugin"><view
class='cuIcon-cu-image'><image src
="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image
></view
><view
class="{{PageCur=='plugin'?'text-green':'text-gray'}}">擴展
</view
></view
><view
class="action" bindtap
="NavChange" data
-cur
="about"><view
class='cuIcon-cu-image'><image src
="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image
></view
><view
class="{{PageCur=='about'?'text-green':'text-gray'}}">關于
</view
></view
>
</view
>
總結
以上是生活随笔為你收集整理的小程序colorui引入与使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
