微信小程序，页面滚动到指定高度

发表于   |   分类于

微信小程序中实现，点击页面滚动到指定高度，以及遇到的坑。

背景

项目中有这么一个需求：切换选项卡时，页面滚动到指定的位置。

实现方式

用wx.pageScrollTo的selector实现

只需在wxml中给元素定义id，在js中如下调用：

1
2
3
wx.pageScrollTo({
selector: '#id'
})

此处有坑：如果页面中使用了自定义导航栏，会导致元素位置出现偏差，偏差的高度为自定义导航栏的高度。到目前为止，还没有解决：自定义导航栏导致wx.pageScrollTo的selector指定元素位置出现偏差?

我的页面刚好有用到自定义导航栏，用这种方式实现的想法流产……

用wx.pageScrollTo的scrollTop实现

1
2
3
wx.pageScrollTo({
scrollTop: scrollTop
})

那么我们需要知道滚动的高度，即元素距离页面顶部的高度。

如何获取元素距离页面顶部的高度？

1
2
3
4
5
6
7
8
9
10
11
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  // res[0].top： #the-id节点的上边界坐标
  // res[1].scrollTop：显示区域的竖直滚动位置
  // 即 scrollTop的值为：元素此刻距离顶部的高度 + 页面滚动高度 - 自定义导航栏的高度
  wx.pageScrollTo({
    scrollTop: res[0].top + res[1].scrollTop - navHeight
  })
})

用scroll-view + scroll-into-view实现