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

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

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

三、給每個導航加上bindtap點擊事件和自定義屬性data-xxx。

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

???關于自定義屬性的設置和獲取：標簽里使用data-屬性名="屬性值"進行設置，使用e.currentTarget.dataset.屬性名進行獲取。

四、index.js中寫上對應方法

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

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

<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文件下自動創建相關文件

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

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

使用已注冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑。

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

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

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

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

七、相關代碼及效果
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>發布</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})}, })

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。