微信小程序之如何自定義底部tabbar導航（轉）

我之前寫一個微信小程序，保單萬事通，有一個這樣的功能

 

image.png

這個底部導航，如果用小程序自帶的tabbar，根本無法實現，所有我想第2種方法來實現
微信小程序文檔中，有一種這個方法，但是我不建議，體驗極差。。。。使用首先可以通過在app.json里放入

{ "usingComponents": { "mp-tabbar": "../../components/tabbar/tabbar" } } 

然后組件引入

<mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar> 

// page.js示例代碼

Page({ data: { list: [{ text: "對話", iconPath: "/example/images/tabbar_icon_chat_default.png", selectedIconPath: "/example/images/tabbar_icon_chat_active.png", }, { text: "設置", iconPath: "/example/images/tabbar_icon_setting_default.png", selectedIconPath: "/example/images/tabbar_icon_setting_active.png", badge: 'New' }] }, tabChange(e) { console.log('tab change', e) } }); 

但是這樣寫有個問題，就是換頁面的時候，會導致整個頁面重新刷新，用戶體驗不好
所以我建議，通過在app.json里放入tabbar

js
 "tabBar": { "custom": true,//組件替換屬性 "color": "#7A7E83", "selectedColor": "#333333", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/guarantee/guarantee", "iconPath": "assets/img/1.png", "selectedIconPath": "assets/img/2.png", "text": "保單萬事通" }, { "pagePath": "pages/add/add", "iconPath": "assets/img/add.png", "text": "添加保單" }, { "pagePath": "pages/my/my", "iconPath": "assets/img/6.png", "selectedIconPath": "assets/img/7.png", "text": "我的" } ] }, 

注意我加了一個屬性 "custom": true，這個如果不加，就只能使用微信自帶的tabbar底部導航了，無法按照自己的想法設計，所以，當你加了custom這個屬性后，你只需要，在根目錄下，添加一個組件 cumtom-tab-bar,你甚至都不需要去引進，小程序會自己去找這個組件，切記，放到根目錄下，然后，你就可以隨心所欲控制底部tabbar了

Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#333333", canCustom: true, list: [ { "pagePath": "/pages/guarantee/guarantee", "iconPath": "/assets/img/1.png", "selectedIconPath": "/assets/img/2.png", "text": "保單" }, { "pagePath": "/pages/add/add", "iconPath": "/assets/img/4.png", "selectedIconPath": "/assets/img/add.png", "text": "添加保單" }, { "pagePath": "/pages/my/my", "iconPath": "/assets/img/6.png", "selectedIconPath": "/assets/img/7.png", "text": "我的" } ] }, created(){ }, lifetimes: { attached: function () { // getApp().watch(this.watchBack,this) }, }, attached: function () { // getApp().watch(this.watchBack, this) }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path; console.log(url); var pages = getCurrentPages() //獲取加載的頁面 // var currentPage = pages[pages.length - 1] //獲取當前頁面的對象 // var urls = currentPage.route //當前頁面url // var options = currentPage.options //如果要獲取url中所帶的參數可以查看options // console.log("route = ", urls); console.log(url) if (url == "/pages/add/add"){ getApp().globalData.switctTime++; if (getApp().globalData.switctTime>1){ getApp().globalData.switctTime = 0; wx.switchTab({ url: getApp().globalData.userUrl }) return false; }else{ wx.switchTab({ url:"/pages/add/add" }) return false; } // if (urls == "pages/add/add"){ // getApp().globalData.userUrl = 1 // } }else{ getApp().globalData.switctTime = 0; getApp().globalData.userUrl = url; } // if(url==undefined){ // this.setData({ // selected: data.index // }) // return; // } wx.switchTab({ url:url }) this.setData({ selected: data.index }) } } }) wxml <!--miniprogram/custom-tab-bar/index.wxml--> <cover-view id='customTabBar' class="tab-bar" wx:if="{{canCustom}}"> <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> wxss .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 10000; } .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; position: relative; } .tab-bar-item cover-image { width: 27px; height: 27px; } .tab-bar-item cover-view { font-size: 10px; } 

作者：吃蓋澆飯
鏈接：https://www.jianshu.com/p/f4eae3317194
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。