微信小程序之如何自定义底部tabbar导航(转)
我之前写一个微信小程序,保单万事通,有一个这样的功能
![](http://upload-images.jianshu.io/upload_images/10006786-7469f2c27f4e2abb.png?imageMogr2/auto-orient/strip|imageView2/2/w/368/format/webp)
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