uniapp小程序的锚点定位（将页面滚动到目标位置）

程序猿看视界2024-12-15 7:10

小程序中，a页面跳转到b页面，跳转后滚动定位到b页面的特定位置。

1.uni.pageScrollTo传递一个scrollTop参数可以滚动到特定位置。
2.可以通过 uni.createSelectorQuery()等获取定位元素的位置信息。
3.uni.getSystemInfoSync()获取设备的导航栏和状态栏高度。
4.注意：scrollTop参数的值是2的top的值减去3的导航栏的高度和状态栏的高度。
5.最后，需要注意使用定时器，等待页面渲染完毕，开始滚动。

直接上代码：下面是b页面的模板代码和js代码。

html 复制代码

<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>

js 复制代码

onLoad(opt){
    // pos是a页面跳转携带的query参数。a,b,c,d
    const 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();
  }