微信小程序之如何自定义底部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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。