小程序获取元素距离顶部高度,然后利用pageScrollTo
滚动到指定的高度
方案1:常见的解决办法思路就是先获取元素距离顶部高度然后再滚动
页面
//页面的
let query = wx.createSelectorQuery()
query.select(`.class`).boundingClientRect((res) => {
wx.pageScrollTo({
scrollTop: res.top
})
}).exec((res) => {
console.log(res)
})
组件内需要在后面加上 .in(this)
不然返回一直是null
//组件的需要后面加上.in(this)
let query = wx.createSelectorQuery().in(this)
query.select(`.class`).boundingClientRect((res) => {
wx.pageScrollTo({
scrollTop: res.top
})
}).exec((res) => {
console.log(res)
})
缺点:这个方法只能在页面还在最顶部的时候使用,页面滚动到下面就不行了
方案2:官方的pageScrollTo
方法支持直接传选择器的
// 具体使用方法
wx.pageScrollTo({
selector:".class"
})
可以直接写组件内的选择器哦
方案2不行的话选方案3
var query = wx.createSelectorQuery();
query.select('#target').boundingClientRect().selectViewport().scrollOffset().exec((res) => {
console.log(res);
wx.pageScrollTo({
scrollTop: res[1].scrollTop + res[0].top
})
})
推荐直接使用方案2,方案3保险,方案2简单。