微信小程序---页面导航day02

 

实现tabbar两种跳转方式及返回

页面导航：页面之间的相互跳转

1、声明式导航

 导航到tabBar页面（app.json中被配置为tabbar的页面）

<navigator url="/pages/message/message" open-type="switchTab">消息导航</navigator>

url：必须是绝对路径"/"开头，open-type 如果是跳转的tabbar 必须是swithTab 

导航到非tabBar页面

<navigator  url="/pages/shop-car/shop-car"  open-type="navigate">购物车</navigator>

url：必须是绝对路径"/"开头，open-type 值为：navigate ，也可以省略不写

后退导航

<navigator open-type="navigateBack"  delta="1">后退</navigator>

open-type值是navigateBack，delta 后退的层级默认是1，在后退上一页时可以不写

声明式传参

<navigator url="/pages/shop-car/shop-car?shopId=1&userId=2">购物车</navigator>

直接在url参数后边拼接即可

2、编程式导航

导航到tabBar页面（app.json中被配置为tabbar的页面）

 <button bindtap="goMsg">消息</button>

添加功能按钮，并绑定事件，在js文件中创建事件

 // 编程式跳转tabbar页面

  goMsg(){

    wx.switchTab({

      url: '/pages/message/message',

    })

  }

导航到非tabBar页面

 <button bindtap="goMsg">消息</button>

添加功能按钮，并绑定事件，在js文件中创建事件

// 编程式跳转tabbar页面

  goMsg(){

    wx.navigateTo({

      url: '/pages/message/message',

    })

  }

后退导航

<button bindtap="goBack">后退</button>

 goBack(){

    wx.navigateBack()

  },

编程式传参

<button bindtap="goShopCar">跳转到购物车</button>

// 跳转事件

goShopCar(){

    wx.navigateTo({

      url: '/pages/shop-car/shop-car?shopId=123&userId=345',

    })

  },

3、onLoad中接收参数

 onLoad(options) {

      console.log(options,"购物车接收到参数")

  },

options包含跳转之后传递的参数，可直接引用，也可以定义到data中供全局使用