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