微信小程序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