声明式导航
设置一个<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({
// 必填url
url: '/pages/contact/contact',
success(){},
fail(){},
complete(){}
})
}
})
导航到非tabBar页面
wx.navigateTo()
// 绑定跳转函数 xxx.wxml
<button bindtap="goToInfo">跳转到info 非tabBar页面</button>
// 实现函数 xxx.js
Pages({
goToInfo(){
wx.switchTab({
// 必填url
url: '/pages/contact/contact',
success(){},
fail(){},
complete(){}
})
}
})
后退导航
wx.navigateBack()
- 设置delta 默认是1 可以取消设置delta
// 绑定跳转函数 xxx.wxml
<button bindtap="backIndex">后退导航</button>
// 实现函数 xxx.js
backIndex(){
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);
},
})