微信小程序 锚点的实现 计算高度法

背景

最近在开发小程序的时候，遇到一个在页面上做锚点的需求

查阅了一下，小程序的锚点和浏览器中html的锚点是不一样的，所以不能用 a 标签加 #锚点 来实现

scroll-view实现

通常，在小程序中，可以用scroll-view标签的scroll-into-view属性进行跳转，这是网上常见的方法，具体方法，就不详细说了，可以参考这篇文章 微信小程序-锚点定位

但是scroll-view实现的锚点有一些缺点：

• 使用了scroll-view，就不能使用页面的下拉刷新 onpulldownrefresh，scroll-view 使用提示

计算高度实现

这个方法的基本思路是：计算出锚点相对于页面的高度，使用wx.pageScrollTo滚动到锚点位置

具体方法如下：

首先，计算出锚点元素相对于当前可视区域的高度，即元素和小程序title的距离，文档 wx.createSelectorQuery，fields

wx.createSelectorQuery().select('#anchor').fields({
    rect: true
}, function (res) {
    a = res.top
}

然后，计算出当前页面滚动的高度，即html中的scrollTop，即页面元素顶部距离小程序title的距离，文档 scrollOffset

wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
    b = res.scrollTop
})

最后，使用wx.pageScrollTo滚动到锚点位置，文档 wx.pageScrollTo

wx.pageScrollTo({
    scrollTop: a + b
});