uni-app实现页面滚动到指定位置

小郑！

已于 2022-05-20 09:56:07 修改

阅读量9.3k

点赞数 2

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

于 2022-03-24 13:58:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45479398/article/details/123709351

版权

uni-app 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在uni-app中使用createSelectorQuery和pageScrollTo方法实现页面滚动到指定位置的功能。通过选取目标节点和最外层盒子节点，计算滚动距离，并设置duration为0以避免错误，最终实现平滑滚动到目标元素的精确位置。

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

uni-app实现页面滚动到指定位置

uni.createSelectorQuery().select(".content").boundingClientRect(data=>{//目标节点、也可以是最外层的父级节点

　　uni.createSelectorQuery().select(".box1").boundingClientRect((res)=>{//最外层盒子节点
　　
　　　　uni.pageScrollTo({
　　　　
　　　　　　duration:0,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
　　　　　　
　　　　　　scrollTop:res.top - data.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
　　　　　　
　　　　})
　　　　
　　}).exec()
　　
}).exec();