微信小程序底部導航相信同學們并不陌生，它的作用是把我們的系統按照不同的功能或意義劃分開來。

導航的意義主要有以下幾點：

1. 指引用戶到達TA們想去的頁面
2. 明确劃分系統的功能，讓用戶一目了然系統的大緻功能
3. 增加用戶體驗，讓用戶使用系統更容易上手
4. 頁面多了，需要歸類，導入航作為頁面入口

自定義tabbar,最終效果

那麼要在微信小程序怎麼實現TA呢？

答案呼之欲出，就是自定義tapbar啦。

顧名思義，自定義導航（tabbar）就是可以按照自己的意思編排、定制我們想要的導航。

自定義 tabBar 可以讓開發者更加靈活地設置 tabBar 樣式，以滿足更多個性化的場景。

下面我們來說下實現流程。

第一步：配置app.json文件，開啟自定義tabbar

配置app.json開啟自定義tabbar

第二步：創建自定義tabbar組件文件夾，并添加相關頁面文件

創建自定義tabbar組件

第三步：編輯custom-tab-bar下面的文件

index.js

Component({ options: { addGlobalClass: true, }, data: { }, methods: { switchTab(e) { const url = e.currentTarget.dataset.path wx.switchTab({ url }) }, }, pageLifetimes: { show(e) { } } })

index.wxml

<view class="cu-bar tabbar bg-gray shadow foot"> <view class="action {{cur_tab=='home'?'text-green':'text-black'}}" bindtap="switchTab" data-path='/pages/index/index'> <view class='cuIcon-home'> </view> 主頁 </view> <view class="action {{cur_tab=='logs'?'text-green':'text-black'}}" data-path='/pages/logs/logs' bindtap='switchTab'> <view class='cuIcon-form'></view> 日志 </view> <view class="action {{cur_tab=='comment'?'text-green':'text-black'}}" data-path='/pages/comment/list' bindtap='switchTab'> <view class='cuIcon-comment'> </view> 消息 </view> </view>

index.json

{ "component": true }

index.wess

.text-green{ color: #39b54a; } .bg-gray { background-color: #f0f0f0; color: #666; } .bg-white { background-color: #ffffff; color: #666666; }

最後，我們編譯一下看效果。

可以看到頁面能切換了，可是菜單并沒有随着切換顔色（激活狀态），因為還漏了一步沒做。

就是在每個page裡面要加上一段很關鍵的代碼

對應page的onShow函數裡加上這段代碼就可以實現切換頁面時并激活當前所選的卡片了。

好了，這一期就到這裡啦，謝謝大家的耐心閱讀，持續關注小搜将為您帶來更多實用的文章。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!