uniapp 页面滚动到指定位置

最新推荐文章于 2025-06-26 16:48:56 发布

MAIMIHO

最新推荐文章于 2025-06-26 16:48:56 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Uniapp 小程序文章标签：前端小程序 uni-app

本文链接：https://blog.youkuaiyun.com/MAIMIHO/article/details/123167505

Uniapp 同时被 2 个专栏收录

18 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

本文介绍了如何使用uni-app的uni.createSelectorQuery()方法结合pageScrollTo()实现页面内元素的精确滚动定位。通过选取目标节点和外层容器节点，计算实际滚动距离，从而达到平滑滚动到目标位置的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view id="container">
    <view id="target"> </view>
</view>

uni.createSelectorQuery()
    .select(".container")//对应外层节点
    .boundingClientRect((container) => {
        uni.createSelectorQuery()
        .select("#target")//目标节点
        .boundingClientRect((target) => {
            uni.pageScrollTo({
            scrollTop: target.top - container.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
            });
        })
        .exec();
    })
    .exec();