1.配置tabbar:打开app.json 在pages中写下:
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
注意:tabbar标签在app.json配置中必须放在前列
2.页面配置:在页面.json文件中
3.声明式导航
导航到非tabbar页面
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
后退导航
<navigator open-type="navigateBack" delta="1">后退</navigator>
4.编程式导航
导航到tabbar页面
.html文件里
<button bind:tap="gotoMessage">跳转到message页面</button>
.js文件里
gotoMessage(){
wx.switchTab({
url: '/pages/message/message',
})
},
导航到非tabbar页面
后退导航
goBack(){
wx.navigateBack({
delta:1
})
},
5.导航传参
(1)声明式导航传参
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
(2)编程式导航传参
.html文件中
<button bind:tap="gotoInfo2">跳转到info页面</button>
.js文件中
gotoInfo2(){
wx.navigateTo({
url: '/pages/info/info?name=ls&gender=男',
})
},
(3)在onLoad中接收导航参数
info.js中 第一步:
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options)
this.setData({
query: options
})
},
第二步放入data即可在其他地方显示appdata:
data: {
// 导航传递过来的参数对象
query:{}
},