我之前写一个微信小程序，保单万事通，有一个这样的功能

image.png

这个底部导航，如果用小程序自带的tabbar，根本无法实现，所有我想第2种方法来实现

微信小程序文档中，有一种这个方法，但是我不建议，体验极差。。。。使用首先可以通过在app.json里放入

{

"usingComponents": {

"mp-tabbar": "../../components/tabbar/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

{{item.text}}

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;

}