小程序中实现滚动定位功能

最新推荐文章于 2025-10-08 10:47:10 发布

原创最新推荐文章于 2025-10-08 10:47:10 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用WeChat小程序的scroll-view组件，通过动态计算节点高度并设置scroll-top属性，确保每次点击切换内容时能快速定位到相应标签。关键步骤包括获取元素高度和设置滚动条位置。

1.功能概览
这里有三个Tab，点击切换后，滚动条需要滚动到指定的位置，这里需要用到下面的方法
1.scroll-view 方法小程序scroll-view 方法

在这里插入图片描述需要在页面上加上scroll-view 标签



   <scroll-view class="browse_content_box" scroll-y="true" style="height:100%" scroll-top="{{scrllorTop}}">


//scroll-y 允许纵向滑动
//scroll-top  设置竖向滚动条位置
//style="height:100%"   //设置高度和父级一样

2.每次点击取到下标和标签商店ID,获取元素高度

   let scrollName = ""
        if(index == 0){
            scrollName = '#singleId'
        }else if (index == 1){
            scrollName = '#manyId'
        }else if (index == 2){
            scrollName = '#judgeId'
        }
            const query = wx.createSelectorQuery()
            query.select(scrollName).boundingClientRect()
            query.selectViewport().scrollOffset()
            query.exec(function(res){
                console.log(res)
            let   scrollTop = res[0].top 
            that.setData({
                scrllorTop :scrollTop
            })
                res[0].top       // #the-id节点的上边界坐标
                res[1].scrollTop // 显示区域的竖直滚动位置
            })

3.功能展示
点击单选题
在这里插入图片描述