This article refers to the following blog post
Article Directory
Navigator component jump
This component is similar to the <a> tag, you only need to wrap the part that needs to be redirected, and then configure the url .
<navigator url="page/component/search">
...
</navigator>
This component has its own back function, as shown in the figure below:
When you click the search box, it will jump to the right page, and the back button will appear in the upper left corner.
navigateTo Jump (JS)
This jump method uses the API provided by wx .
********** .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 back
Close the current page and return to the previous page or multi-level pages. You can get the current page stack through getCurrentPages and decide how many layers you need to return.
(For example, jump from A to B , and then jump from B to C , and now perform navigateBack on the C page , and set the delta parameter to 1 , then jump to B , if it is set to 2 , it will jump to A , if the setting is greater than 2. Number, then it will jump to the homepage )
When used in a small program plug-in, it can only be called on the page of the current plug-in.
wx.navigateBack({
delta: 1
});
The problem of passing parameters
If you need to pass parameters when redirecting, add them to the url according to the get request .
Component parameter transfer:
<navigator url="/pages/component/more?id={
{item.id}}&checked=ture">
...
</navigator>
Receive transfer parameters:
Page({
onLoad: function(options) {
this.setData({
title: options.id,
checked: options.checked
})
}
})
JS jump transfer parameters.
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 receives parameters.
//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)
})
}
})