先上图看下效果
当点击底部导航“发布”按钮后，直接通过navigate 跳转到新的页面而不是切换tab
实现原理：使用tabbar自定义组件，官方有案例，将案例导入到小程序代码片段，导入后即可实现自定义tabbar，这里最关键的点是，在app.json中的tabbar不能添加要跳转的元素，否则会报不能navigate跳转tabbar页面的错误。
导入代码片段后，修改app.json文件
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#d81e06",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "tt_dache/pages/home/home",
"iconPath": "/tt_dache/resource/images/home.png",
"selectedIconPath": "/tt_dache/resource/images/home_selected.png",
"text": "首页"
},
{
"pagePath": "tt_dache/pages/user/user",
"iconPath": "/tt_dache/resource/images/user.png",
"selectedIconPath": "/tt_dache/resource/images/user_selected.png",
"text": "我的"
}
]
}
修改custom-tab-bar/index.js
Component({
data: {
selected: 0,
show: true,
color: "#000000",
selectedColor: "#d81e06",
list: [{
pagePath: "/tt_dache/pages/home/home",
iconPath: "/tt_dache/resource/images/home.png",
selectedIconPath: "/tt_dache/resource/images/home_selected.png",
text: "首页"
}, {
pagePath: "/tt_dache/pages/issue/issue",
iconPath: "/tt_dache/resource/images/add.png",
selectedIconPath: "/tt_dache/resource/images/add_selected.png",
text: "发布",
navigate:true
}, {
"pagePath": "/tt_dache/pages/user/user",
"iconPath": "/tt_dache/resource/images/user.png",
"selectedIconPath": "/tt_dache/resource/images/user_selected.png",
"text": "我的"
}]
},
attached() {},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
console.log(data.index)
if (this.data.list[data.index].navigate == true) {
wx.navigateTo({//跳转到新的页面
url: url,
complete: function (res) {
console.log(res);
}
})
} else {
wx.switchTab({
url
})
this.setData({
selected: data.index
})
}
}
}
})
