在微信小程序中,页面跳转可以通过以下几种方法实现:
wx.navigateTo()
功能:打开新的页面并保留当前页面。
参数:可以传递URL参数,格式为`url: '页面路径'`,也可以传递对象参数,格式为`{url: '页面路径', success: function() {}, fail: function() {}, complete: function() {}}`。
示例:
```javascript
wx.navigateTo({
url: '/pages/target/target',
success: function() {
console.log('跳转成功');
},
fail: function() {
console.log('跳转失败');
},
complete: function() {
console.log('跳转完成');
}
});
```
wx.redirectTo()
功能:关闭当前页面并打开新的页面。
参数:可以传递URL参数,格式为`url: '页面路径'`,也可以传递对象参数,格式为`{url: '页面路径', success: function() {}, fail: function() {}, complete: function() {}}`。
示例:
```javascript
wx.redirectTo({
url: '/pages/index/index',
success: function() {
console.log('跳转成功');
},
fail: function() {
console.log('跳转失败');
},
complete: function() {
console.log('跳转完成');
}
});
```
wx.switchTab()
功能:打开tabBar中的某个页面。
参数:可以传递URL参数,格式为`url: '页面路径'`,也可以传递对象参数,格式为`{url: '页面路径', success: function() {}, fail: function() {}, complete: function() {}}`。
示例:
```javascript
wx.switchTab({
url: '/pages/index/index',
success: function() {
console.log('跳转成功');
},
fail: function() {
console.log('跳转失败');
},
complete: function() {
console.log('跳转完成');
}
});
```
wx.navigateBack()
功能:返回到上一个页面或多级页面。
参数:可以传递一个数字`delta`,表示返回的页面数,如果不传递则默认返回上一页面。
示例:
```javascript
wx.navigateBack({
delta: 1,
success: function() {
console.log('返回成功');
},
fail: function() {
console.log('返回失败');
},
complete: function() {
console.log('返回完成');
}
});
```
URL参数传递
功能:通过URL参数将数据传递到下一个页面。
示例:
```javascript
wx.navigateTo({
url: '/pages/target/target?id=1&page=4',
success: function(option) {
console.log(option.id); // 输出:1
},
fail: function() {
console.log('跳转失败');
},
complete: function() {
console.log('跳转完成');
}
});
```
页面栈管理
功能:通过API返回指定层数的页面,实现返回上一级或任意一级页面的功能。
示例:
```javascript
wx.navigateTo({
url: '/pages/target/target',
success: function() {
console.log('跳转成功');
},
fail: function() {
console.log('跳转失败');
},
complete: function() {
console.log('跳转完成');
}
});
// 在目标页面中返回上一级
wx.navigateBack({
delta: 1,
success: function() {
console.log('返回成功');
},
fail: function() {
console.log('返回失败');
},
complete: function() {
console.log('返回完成');
}
});
```