我之前写一个微信小程序，保单万事通，有一个这样的功能
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 })