前言： 在開發小程序過程中，如果你需要根據不同用戶角色顯示不同底部導航；或者導航樣式需要個性化設計。此時就需要用到自定義底部導航 custom-tab-bar。

具體操作：

1、根目錄下創建custom-tab-bar目錄

2、在app.json文件中配置導航信息

"tabBar": {"custom": true, // 開啟自定義導航"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [ // 配置導航按鈕信息 如果按條件顯示不同按鈕的話；這里一定要把所有的按鈕全量的都配置上（比如當前示例中，登錄前顯示首頁和我的兩個按鈕；登錄后顯示首頁、工作臺、我的三個按鈕；在這里要把可能出現的按鈕全部配置上）{"pagePath": "pages/home/index", //頁面路由"iconPath": "/img/icon_home_def.png", // 按鈕圖標"selectedIconPath": "/img/icon_navbar_homesel.png", // 選中時圖標"text": "首頁" // 按鈕文字},{"pagePath": "pages/workbench/index","iconPath": "/img/icon_navbar_workdef.png","selectedIconPath": "/img/icon_navbar_worksel.png","text": "工作臺"},{"pagePath": "pages/my/index","iconPath": "/img/icon_navbar_userdef.png","selectedIconPath": "/img/icon_navbar_usersel.png","text": "我的"}] },

3、custom-tab-bar/index.wxml 文件內容

<!--miniprogram/custom-tab-bar/index.wxml--> <cover-view class="tab-bar"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view> </cover-view>

4、custom-tab-bar/index.js 文件內容

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#ff0000",list: []},attached() {this.setData({list: [{"pagePath": "/pages/home/index","iconPath": "/img/icon_home_def.png","selectedIconPath": "/img/icon_navbar_homesel.png","text": "首頁"},{"pagePath": "/pages/my/index","iconPath": "/img/icon_navbar_userdef.png","selectedIconPath": "/img/icon_navbar_usersel.png","text": "我的"}]})},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.setData({selected: data.index})}} })

5、custom-tab-bar/index. wxss文件內容

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;padding-top: 4px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom); }.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5); }.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column; }.tab-bar-item cover-image {width: 27px;height: 27px; }.tab-bar-item cover-view {font-size: 10px; }

6、導航跳轉到的頁面內

// 這樣按鈕才能正確顯示選中效果 onShow(){if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 0})} },

7.效果：

登錄前：

登錄后：

總結

以上是生活随笔為你收集整理的小程序自定义底部导航 custom-tab-bar的全部內容，希望文章能夠幫你解決所遇到的問題。

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