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

 

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

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

1、声明式导航

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

消息导航

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

导航到非tabBar页面

navigate">购物车

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

后退导航

后退

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

声明式传参

购物车

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

2、编程式导航

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

 bindtap="goMsg">消息

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

 // 编程式跳转tabbar页面

  goMsg(){

    wx.switchTab({

      url: '/pages/message/message',

    })

  }

导航到非tabBar页面

 消息

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

// 编程式跳转tabbar页面

  goMsg(){

    wx.navigateTo({

      url: '/pages/message/message',

    })

  }

后退导航

后退

 goBack(){

    wx.navigateBack()

  },

编程式传参

跳转到购物车

// 跳转事件

goShopCar(){

    wx.navigateTo({

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

    })

  },

3、onLoad中接收参数

 onLoad(options) {

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

  },

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