???寫在前面：colorUI中提供了很多好看的底部操作條，如何使用這些底部操作條讓我們的項(xiàng)目看起來更美觀（ps：微信小程序的底部操作條tabBar總感覺少了點(diǎn)什么）。
一、在colorUI中找到自己想要的底部操作條，并將其拷貝至index.wxml中。

二、添加名為foot 的class，讓導(dǎo)航條處于頁面底部。

<view class="cu-bar tabbar bg-white shadow foot">

三、給每個(gè)導(dǎo)航加上bindtap點(diǎn)擊事件和自定義屬性data-xxx。

<view class="action text-green" bindtap="changeNav" data-nav="homePage">

???關(guān)于自定義屬性的設(shè)置和獲取：標(biāo)簽里使用data-屬性名="屬性值"進(jìn)行設(shè)置，使用e.currentTarget.dataset.屬性名進(jìn)行獲取。

四、index.js中寫上對應(yīng)方法

Page({data: {pageNav: 'homePage'},changeNav(e) {this.setData({pageNav:e.currentTarget.dataset.nav})}, })

???點(diǎn)擊哪個(gè)導(dǎo)航，e.currentTarget.dataset.nav就能獲取到那個(gè)導(dǎo)航中設(shè)置的data-nav屬性值。
五、點(diǎn)擊之后導(dǎo)航高亮。
???在class中使用三元表達(dá)式，根據(jù)pageNav的值來判斷導(dǎo)航是否高亮。

<view class="action {{pageNav=='homePage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="homePage">

六、完善底部操作條。
1.在app.json的pages中添加頁面路徑

"pages": ["pages/index/index","pages/homePage/index/index","pages/myPage/index/index"],

保存之后，pages文件下自動(dòng)創(chuàng)建相關(guān)文件

2.回到index文件夾下，在index.json文件中，注冊組件

"usingComponents": {"home-page": "/pages/homePage/index/index","my-page": "/pages/myPage/index/index"}

使用已注冊的自定義組件前，首先要在頁面的 json 文件中進(jìn)行引用聲明。此時(shí)需要提供每個(gè)自定義組件的標(biāo)簽名和對應(yīng)的自定義組件文件路徑。

3.在index.wxml文件夾中，使用組件

<home-page></home-page> <my-page></my-page>

4.根據(jù)pageNav的值，使用wx-if來控制組件的顯示隱藏

<home-page wx-if='{{pageNav == "homePage"}}'></home-page> <my-page wx-if='{{pageNav == "myPage"}}'></my-page>

七、相關(guān)代碼及效果
index.wxml:

<!--pages/index/index.wxml--> <home-page wx-if='{{pageNav == "homePage"}}'></home-page> <my-page wx-if='{{pageNav == "myPage"}}'></my-page> <view class="cu-bar tabbar bg-white shadow foot"><view class="action {{pageNav=='homePage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="homePage"><view class="cuIcon-homefill"></view> 首頁</view><view class="action {{pageNav==''?'text-green':'text-gray'}}" bindtap="changeNav" data-nav=""><view class="cuIcon-similar"></view> 分類</view><view class="action {{pageNav==''?'text-green':'text-gray'}} add-action" bindtap="changeNav" data-nav=""><button class="cu-btn cuIcon-add bg-green shadow"></button>發(fā)布</view><view class="action {{pageNav==''?'text-green':'text-gray'}}" bindtap="changeNav" data-nav=""><view class="cuIcon-cart"><view class="cu-tag badge">99</view></view>購物車</view><view class="action {{pageNav=='myPage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="myPage"><view class="cuIcon-my"><view class="cu-tag badge"></view></view>我的</view> </view>

Index.json:

{"usingComponents": {"home-page": "/pages/homePage/index/index","my-page": "/pages/myPage/index/index"} }

Index.js:

// pages/index/index.js Page({data: {pageNav: 'homePage'},changeNav(e) {this.setData({pageNav:e.currentTarget.dataset.nav})}, })

總結(jié)

以上是生活随笔為你收集整理的2.微信小程序（colorUI）- 构建底部操作条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。