微信小程序中的多页面切换与跳转是实现用户界面之间的导航和交互的重要部分。本文将详细介绍多页面切换和跳转的实现方式,并提供相应的代码案例。
一、页面切换 在微信小程序中,页面切换是指从一个页面跳转到另一个页面。页面切换是通过页面栈的方式实现的,页面栈是一个栈结构,每次跳转到一个新页面,就会将该页面入栈,返回时则出栈。微信小程序提供了多种方式进行页面切换。
1.1 navigateTo navigateTo 是最常用的页面切换方式,可以跳转到应用内的非 tabBar 页面。在跳转时,会保留当前页面的状态,并将目标页面导航至页面栈栈顶。
示例:在当前页面点击按钮跳转到目标页面
// 当前页面的js代码
Page({
onTap: function() {
wx.navigateTo({
url: '/pages/targetPage/targetPage',
});
}
});
1.2 redirectTo redirectTo 可以跳转到应用内的非 tabBar 页面。在跳转时,会关闭当前页面,并将目标页面导航至页面栈栈顶。
示例:在当前页面点击按钮跳转到目标页面
// 当前页面的js代码
Page({
onTap: function() {
wx.redirectTo({
url: '/pages/targetPage/targetPage',
});
}
});
1.3 navigateBack navigateBack 可以返回上一个页面或多个页面。在跳转时,会将目标页面出栈,并返回至栈中的指定页面。