本篇文章参考以下博文
navigator 组件跳转
这个组件类似 <a> 标签,只需要包裹住需要跳转的部分,然后配置 url 即可。
<navigator url="page/component/search">
...
</navigator>
这个组件是自带后退功能的,如下图所示:
当点击搜索框的时候,会跳转到右侧页面,并且左上角会出现后退按钮。
navigateTo 跳转(JS)
这个跳转方法用的是 wx 提供的 API 。
********** .wxml **********
<view class='tab-view-item' bindtap="indexNavigator">
<text class="tab-view-item-text">更多>></text>
</view>
********** .js **********
indexNavigator:function(e){
wx.navigateTo({
url: '/pages/component/more'
})
},
navigateBack 返回
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
(比如从 A 跳到 B ,然后又从 B 跳到 C ,现在在 C 页面执行 navigateBack , delta 参数设置为 1 ,就会跳到 B ,如果设置为 2 ,就会跳到 A ,如果设置 大于2 的数,那就会跳到 首页 )
在小程序插件中使用时,只能在当前插件的页面中调用。
wx.navigateBack({
delta: 1
});
传参问题
跳转时如果需要传递参数,要按照 get 请求添加到 url 中。
组件传参:
<navigator url="/pages/component/more?id={
{item.id}}&checked=ture">
...
</navigator>
接收传参:
Page({
onLoad: function(options) {
this.setData({
title: options.id,
checked: options.checked
})
}
})
JS 跳转传参。
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', {
data: 'test' })
}
})
JS 接收参数。
//test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {
data: 'test'});
eventChannel.emit('someEvent', {
data: 'test'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})