前端小程序页面滚动到指定位置

如何让页面自动滚动到某个位置（比如点击某一个按钮，需要自动滚动到对应内容的位置），在小程序是很简单的，官方提供获取元素位置和滚动到目标位置API:

1.使用uni.createSelectorQuery().select().boundingClientRect()查询到需要滚动到的元素位置

2.滚动到目标位置: uni.pageScrollTo()

微信原生也是一样的，使用wx.createSelectorQuery()和wx.pageScrollTo()

小程序很多api都很简单，拿来可以直接使用，下面总体使用方法案例：

toScroll() {

// 1.使用uni.createSelectorQuery()查询到需要滚动到的元素位置

const query = uni.createSelectorQuery().in(this);

query.select('.recommend-list').boundingClientRect(data => {

console.log(data.top) // 滚动到的位置（距离顶部 px）

// 到这里我们可以从data中读到top，即离顶部的距离（px）

// 2使用uni.pageScrollTo()将页面滚动到对应位置

uni.pageScrollTo({

scrollTop: data.top, // 滚动到的位置（距离顶部 px）

duration: 300

});

}).exec();

好文推荐

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙