如何让页面自动滚动到某个位置(比如点击某一个按钮,需要自动滚动到对应内容的位置),在小程序是很简单的,官方提供获取元素位置和滚动到目标位置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();
},