uniapp点击元素滚动到指定模块的实现代码

Web前端开发 / 10 次阅读

点击元素页面自动滚动到指定ID模块是一个网站常见的效果,在uniapp开发的时候需要实现这个效果,实现思路跟web网页实现代码是一致的:获取指定ID模块距离顶部的距离,再通过指定方法滚动到这个距离的像素(如uni.pageScrollTo)。

PS:uni.pageScrollTo的核心作用是让页面滚动到指定的目标位置。

view代码:

<view class="custom-navbar">
    固定头部
</view>
<view class="menu">
    <view class="item"  @click="goAnchorItem()">点击</view>
</view>
<view class="anchor" id="#anchor">
    
</view>

vue代码:

//定义变量,用于获取头部的高度
const navbarHeight = ref(0)

//获取custom-navbar高度的函数
const getNavbarHeight = () =>{
    uni.createSelectorQuery().select('.custom-navbar').boundingClientRect(data => {
        if (data) {
              navbarHeight.value = data.height;
        }
    }).exec();
}

//滚动到指定ID模块的函数
const goAnchorItem = () => {

    //先获取页面当前的滚动位置,
    //因为下面的data.top是元素距离页面顶部的距离,但不含已滚动距离,严格来说是距离视窗顶部的距离,所以要获取元素在整个文档中的绝对位置就要加上当前已经滚动的距离
    uni.createSelectorQuery().selectViewport().scrollOffset(res => {
    const scrollTop = res.scrollTop;
    
    
    uni.createSelectorQuery().select('#anchor').boundingClientRect(data => {
        if (data) {
          const absoluteTop = scrollTop + data.top - navbarHeight.value; // 计算最终的 scrollTop
          
          // 滚动到准确位置
          uni.pageScrollTo({
            scrollTop: absoluteTop,
            duration: 300
          });
        }
      }).exec();
    }).exec();
}

onLoad(()=>{
    //加载后执行函数
    getNavbarHeight()
})

提示:duration设置为 0 可以立即跳转,没有动画效果。另外在自定义组件中使用时,如果要获取组件内元素的节点信息,需要使用uni.createSelectorQuery().in(this)中的 in(this)方法。