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

最后修改:2024 年 03 月 14 日
如果觉得我的文章对你有用,请随意赞赏