页面跳转:
1. 跳转到新页面:
// 在事件处理函数中跳转到新页面
wx.navigateTo({
url: '/pages/newPage/newPage',
});
2. 关闭当前页面,返回上一页面或多级页面:
// 返回上一页面
wx.navigateBack({
delta: 1,
});
3. 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面:
wx.switchTab({
url: '/pages/tabBarPage/tabBarPage',
});
4. 重定向(关闭当前页面,跳转到应用内的某个页面):
wx.redirectTo({
url: '/pages/redirectPage/redirectPage',
});
页面传参:
在跳转时,可以通过 url 中的参数传递数据:
// 跳转并传递参数
wx.navigateTo({
url: '/pages/newPage/newPage?id=123&name=John',
});
在新页面的 onLoad 生命周期中可以获取参数:
onLoad: function (options) {
const id = options.id;
const name = options.name;
// 其他操作...
}
页面间通信:
1. 使用全局变量或全局状态管理: 可以将一些共享的数据存储在小程序的全局变量中,或使用全局状态管理库(如 mobx-miniprogram、miniprogram-state 等)进行状态管理。
2. 通过事件发布订阅机制: 可以使用事件触发器 eventChannel,在页面间进行事件的发布和订阅。
锚点导航:
在页面内,你可以使用 scroll-into-view 属性来实现滚动到指定锚点位置:
<!-- 在wxml中设置锚点 -->
<view id="anchor1">这是锚点1</view>
<!-- 在scroll-view中使用scroll-into-view -->
<scroll-view scroll-into-view="anchor1">
<!-- 内容区域 -->
</scroll-view>
这是一些基本的导航操作,具体的使用会根据你的小程序需求而变化。在实际开发中,你可能会结合页面生命周期、事件处理等进行更灵活的导航和页面间的交互。
转载请注明出处:http://www.zyzy.cn/article/detail/813/微信小程序