小程序中,a页面跳转到b页面,跳转后滚动定位到b页面的特定位置。
- 1.uni.pageScrollTo传递一个scrollTop参数可以滚动到特定位置。
- 2.可以通过 uni.createSelectorQuery()等获取定位元素的位置信息。
- 3.uni.getSystemInfoSync()获取设备的导航栏和状态栏高度。
- 4.注意:scrollTop参数的值是2的top的值减去3的导航栏的高度和状态栏的高度。
- 5.最后,需要注意使用定时器,等待页面渲染完毕,开始滚动。
直接上代码:下面是b页面的模板代码和js代码。
<template><div class="container"><div class="section a"></div><div class="section b"</div><div class="section c"></div><div class="section d"></div></div>
</template>
onLoad(opt){// pos是a页面跳转携带的query参数。a,b,c,dconst pos = opt && opt.pos || '';// 获取手机系统相关的信息,是为了获取导航条和状态栏高度。const res = uni.getSystemInfoSync();// 获取需要定位的元素的坐标位置uni.createSelectorQuery().select(`.${pos}`).boundingClientRect(data => {// 此处的定时器,非常的重要,等待页面渲染完,然后滚动页面。// 需要除去 标题栏高度 和 状态栏高度setTimeout(()=>{uni.pageScrollTo({scrollTop: data.top - res.navigationBarHeight - res.statusBarHeight})}, 300)}).exec();}