开始
微信小程序–页面跳转和传值
创建文件夹
直接app.json 在pages 添加所有创建文件的名字路由
navigator 对象
URL 属性 hover-class 是点击之后的属性
<navigator class="" target="" url="../demo2/demo2" hover-class="navigator-hover" open-type="navigate">
go demo2 page
</navigator>
页面之间的传值
通过用?的形式来知道谁点击跳转到哪里 传值?name=小明&age=19
<navigator class="" target="" url="../demo2/demo2?name=小明&age=19" hover-class="navigator-hover" open-type="navigate">
小明
</navigator>
<navigator class="" target="" url="../demo2/demo2?name=小红" hover-class="navigator-hover" open-type="navigate">
小红
</navigator>
- 传 跳传链接上加?
- 接console.log(options)
页面导航模式
redirect 没有返回键
<navigator class="" target="" url="../demo2/demo2" hover-class="navigator-hover" open-type="navigate" redirect>
跳转(不返回)
</navigator>
无高亮效果
hover-class=“none”
<!-- 无高亮效果 -->
<navigator class="" target="" url="" hover-class="none" open-type="navigate">
点我
</navigator>
高亮效果
hover-class=“my-hover” .myhover{backgroundColor:green;} cursor:pointer; 让所有元素高亮
<navigator class="" target="" url="" hover-class="my-hover" open-type="navigate">
点我
</navigator>
页面导航API
有返回键 wx.navigateTo({})
// 有返回键
// wx.navigateTo({
// url: '../demo2/demo2',
// success: function(res){
// // success
// },
// fail: function() {
// // fail
// },
// complete: function() {
// // complete
// }
// })
无返回键 wx.redirectTo({})
// 无返回键
wx.redirectTo({
url: '../demo2/demo2?name=小明&age=18',
success: function (res) {
// success
console.log(res.options)
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
默认返回上一页 delta 是要指定页面的值(倒退) 如果超过原来页面的个数则退到最后一个页面
// wx.navigateBack 是返回指定页面 delta是要指定页面的值 (倒退)
// 如果超过原来页面的个数则到最后一个页面
bindhandel:function(e){
wx.navigateBack({
delta: 1
});
},