微信小程序scroll-view点击导航栏滚动到对应位置
scroll-into-view
微信小程序提供了点击滚动到相应元素的属性,这个会将对应的元素滚动到scroll-view的顶部,但是如果内部有吸顶元素时,就会被覆盖一部分,这时候就需要用到微信小程序的另一个api。
createSelectorQuery
返回一个 SelectorQuery 对象实例。
const query = wx.createSelectorQuery()
query.select(’#box1’).boundingClientRect() 滚动切换的元素
query.select(’#box2’).boundingClientRect() 滚动切换的元素
query.select(’#tab’).boundingClientRect()//吸顶元素
query.exec(function(res){
//res返回一个数组,包含了上面对应两个元素的宽高
距离顶部距离等
res[0].top // #the-id节点的上边界坐标
res[0].scrollTop // 显示区域的竖直滚动位置
res[0].height // #the-id节点的g高度
})
我们可以获取到需要滚动到的元素前面有多少个元素,然后加上他们的高度(有margin再加上对应margin),然后减去吸顶元素的高度,再配合scroll-view的属性scr