【 微信小程序 】页面导航

2024年4月28日 互联网

声明式导航

  • 设置一个<navigator> 导航组件 点击实现页面跳转
  • <navigator> 需要制定url和open-type属性
    • url 需要跳转的页面地址 必须以 / 开头
    • open-type 表示跳转的方式 必须是 switchTab

导航到tabBar页面

{"pages":["pages/index/index","pages/home/home","pages/contact/contact"],
}
// index.wxml
<view class="container"><text>Index Page</text><navigator url= "/pages/home/home" open-type="switchTab">声明式导航</navigator>
</view>// Home .wxml
<view class="container"><text>Home Page</text><navigator url= "/pages/contact/contact" open-type="switchTab">声明式导航</navigator>
</view>// Contact .wxml
<view class="container"><text>Contact Page</text><navigator url= "/pages/index/index" open-type="switchTab">声明式导航</navigator>
</view>

导航到非tabBar页面

  • <navigator> 需要制定url和open-type属性
    • url 需要跳转的页面地址 必须以 / 开头
    • open-type必须设置为声明式导航
// info页面没有设置tabBar
<!-- 跳转到非tabBar页面 -->
<navigator url= "/pages/info/info" open-type="navigate">声明式导航</navigator>

后退导航

  • 后退到上一页面或者多个页面 需要设置open-type和delta属性
    • open-type = "navigateBack"
    • delta= "需要返回的页面数 <number>"
    • 如果只是返回到上一个页面 就可以省略delta 默认是 1
   <navigator open-type="navigateBack" delta="1">后退导航</navigator>

编程式导航

调用小程序的API 实现页面跳转
导航到tabBar页面

  • wx.switchTab()
// 绑定跳转函数 xxx.wxml
<button bindtap="goTocontact">跳转到contact tabBar页面</button>// 实现函数 xxx.js
Pages({goTocontact(){wx.switchTab({// 必填urlurl: '/pages/contact/contact',success(){},fail(){},complete(){}})}
})

导航到非tabBar页面

  • wx.navigateTo()
// 绑定跳转函数 xxx.wxml
<button bindtap="goToInfo">跳转到info 非tabBar页面</button>// 实现函数 xxx.js
Pages({goToInfo(){wx.switchTab({// 必填urlurl: '/pages/contact/contact',success(){},fail(){},complete(){}})}
})

后退导航
wx.navigateBack()
- 设置delta 默认是1 可以取消设置delta

// 绑定跳转函数 xxx.wxml
<button bindtap="backIndex">后退导航</button>// 实现函数 xxx.jsbackIndex(){wx.navigateBack({delta: 1,})},

导航传参

  • 路径的后面可以携带参数
  • 参数与路径之间使用 ? 分隔
  • 参数键与参数值使用 = 相连
  • 不同参数使用 & 分隔

声明式导航传参

  <navigator url="/pages/info/info?name=zs&age=20">声明式导航传参</navigator>

编程式导航传参

// 绑定跳转函数 xxx.wxml
<button bindtap="goInfo">编程式传参</button>
// 实现函数 xxx.js
goInfo(){wx.navigateTo({url: '/pages/info/info?name=ls&age=15',})}

接收导航传参

onLoad生命周期里面的options接收参数

Page({data: {// 接收导航传递的参数query:{}},onLoad:function(options){console.log(options);this.setData({query:options})console.log(this.data.query);},
})
最新文章