navigator注意点
之前在index页面,在app.json添加了tabbar中的demo页面:
"tabBar": {
"color": "#000",
"selectedColor": "#0af",
"backgroundColor": "#cc0",
"borderStyle": "black",
"list":[
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"images/home.png",
"selectedIconPath": "images/home_opened.png"
},{
"pagePath": "pages/demo/demo",
"text": "案例",
"iconPath":"images/list.png",
"selectedIconPath": "images/list_opened.png"
},{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath":"images/user.png",
"selectedIconPath": "images/user_opened.png"
}
]
如果这时候再用nagivator跳转到demo页面:
wxml:
<navigator url="/pages/demo/demo"
style="width:200rpx;height:200rpx;"
>跳转到demo</navigator>
会发现不能进行跳转。
原因是navigator对应的API:wx.navigateTo
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
会有一个限制保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
作用就是,让tabbar保持一个独立的页面,以至于左上角没有返回上一页面的按钮。
switchTab(Object object)
如果想要通过navigator标签跳转到其他的tabbar页面,可以使用open-type="
`switchTab`"
,但是不能传递参数。
<navigator url="/pages/demo/demo"
style="width:200rpx;height:200rpx;"
open-type="switchTab"
>跳转到demo</navigator>
reLaunch(Object object)
navigator标签最常用的跳转tabbar的属性参数,可以携带参数跳转tabbar页面。open-type="
`reLaunch"`
wx.navigateTo(Object object)
非navigator标签跳转到非tabbar页面
当不使用navigator的情况下,跳转其他tabbar页面,可以使用事件绑定,如:
index.wxml:
<button type="primary" bindtap="clickBtn">点击跳转到日志</button>
index.js:
clickBtn:function(){
wx.navigateTo({
url: '/pages/demo2/demo2',
})
},
wx.switchTab(Object object)
不携带参数跳转到tabbar页面
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
在小程序插件中使用时,只能在当前插件的页面中调用
wx.reLaunch(Object object)
携带参数跳转到tabbar页面
关闭所有页面,打开到应用内的某个页面
在小程序插件中使用时,只能在当前插件的页面中调用
js:
clickBtn:function(){
wx.reLaunch({
url:'/pages/logs/logs?id=123',
})
},
wx.navigateBack(Object object)
返回上一页面
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html
此处评论已关闭