uniapp中从一个页面跳转到另一个页面指定的位置
时间: 2024-05-05 12:17:25 浏览: 183
跳转到指定页面的app
要实现从一个页面跳转到另一个页面指定的位置,可以使用uniapp提供的页面传参功能和页面生命周期函数。
1. 在跳转前的页面,通过uni.navigateTo()方法跳转到目标页面,并将需要跳转到的位置作为参数传递给目标页面。例如:
```
uni.navigateTo({
url: '/pages/targetPage/targetPage?id=1&position=bottom',
})
```
2. 在目标页面的onLoad()生命周期函数中获取传递的参数,并根据参数设置需要跳转到的位置。例如:
```
onLoad: function (options) {
if (options.position === 'bottom') {
// 设置需要跳转到的位置为底部
this.setData({
scrollTop: 9999
})
}
}
```
在此示例中,目标页面的onLoad()生命周期函数通过判断传递的position参数是否为bottom,来设置需要跳转到的位置为页面底部。
3. 在目标页面的wxml文件中,通过scroll-view标签设置页面的滚动区域。例如:
```
<scroll-view scroll-y="true" style="height: 100vh;" scroll-top="{{scrollTop}}">
// 页面内容
</scroll-view>
```
在此示例中,通过设置scroll-view标签的scroll-top属性绑定目标页面的scrollTop变量,实现在页面跳转后自动滚动到指定位置。
需要注意的是,目标页面的onLoad()生命周期函数是在页面首次加载时执行的,如果需要在页面后续更新时也能自动跳转到指定位置,可以考虑在目标页面的onShow()生命周期函数中根据传递的参数更新页面的scrollTop变量。
阅读全文