生活随笔
收集整理的這篇文章主要介紹了
小程序colorui引入与使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
- 在小程序的組件庫里面，colorui的效果還是非常不錯(cuò)，擁有非常多的輪子
colorui的示例
- 在github下載colorui包，其中demo文件夾為小程序文件，可以直接導(dǎo)入到微信開發(fā)工具直接運(yùn)行，目錄結(jié)構(gòu)如下，運(yùn)行效果如上圖，可以查看各個(gè)模塊的效果
colorui引入小程序
- 新建小程序，將colorui文件拷貝到小程序根目錄，在app.wxss中引入
@import
'colorui/main.wxss';
@import
'colorui/icon.wxss';
@import
'colorui/animation.wxss';
- 查看示例的tabbar寫法，示例index.wxml，js文件就不貼了
- 小程序默認(rèn)設(shè)置為index頁面，tabbar默認(rèn)顯示，點(diǎn)擊修改PageCur的值，上面寫上組件，顯示PageCur對(duì)應(yīng)的組件，就完成了頁面切換
<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'}}">擴(kuò)展
</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'}}">關(guān)于
</view
></view
>
</view
>
總結(jié)
以上是生活随笔為你收集整理的小程序colorui引入与使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
