微信小程序页面自动滚动到指定位置

我们有时会需要让页面自动滚动到某个位置（比如点击顶部的目录，滚动到下面对应内容的位置），那么在小程序中我们应该怎么做呢？

做法

1.使用wx.createSelectorQuery().select().boundingClientRect()查询到需要滚动到的元素位置 
2.使用wx.pageScrollTo()将页面滚动到对应位置

官方文档wx.createSelectorQuery() 官方文档wx.pageScrollTo()

scrollTo() {
	// 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
	wx.createSelectorQuery().select('.bb4').boundingClientRect(res => {
	  // 到这里，我们可以从res中读到class为bb4的top，即离顶部的距离（px）
	  // 2使用wx.pageScrollTo()将页面滚动到对应位置
	  wx.pageScrollTo({
	    scrollTop: res.top, // 滚动到的位置（距离顶部 px）
	    duration: 0 //滚动所需时间 如果不需要滚动过渡动画，设为0（ms）
	  })
	}).exec()
}

简单！

扩展一下下

上面的方法搞定之后试一下我们就知道，那是把目标位置滚动到页面顶端的。那么如果我们想要目标位置在屏幕中间呢？其实就是在上面拿到元素距离顶部的距离的基础上减去页面的高度的一半。

scrollTo() {
	// 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
	wx.createSelectorQuery().select('.bb4').boundingClientRect(res => {
         // 2.使用wx.getSysTemInfo()获取设备及页面高度windowHeight（px）
            wx.getSystemInfo({
                success(ress) {
                  wx.pageScrollTo({
                  	// 3. 滚动的距离根据设备的页面高度进行微调（px）
                    scrollTop: res.top - ress.windowHeight/2 + 50,
                    duration: 200
                  })
                }
          })
        }).exec()
}