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

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

做法

1.使用 wx.createSelectorQuery().select().boundingClientRect()查询到需要滚动到的元素位置

2.使用 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()
}

var tity = wx.createSelectorQuery();

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

SelectorQuery.selectViewport() 获取界面上的节点信息

可用于获取显示区域的尺寸、滚动位置等信息。

selectAll('.title ').boundingClientRect();

boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery

tity.exec(function (res) { //执行请求
      wx.pageScrollTo({
        scrollTop: res[0].scrollTop + res[1][0].top,
      })

SelectorQuery.exec(function callback)

执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。

//用户点击tab时调用
  titleClick: function (e) {
    // var that = this;
    var tity = wx.createSelectorQuery();
    tity.selectViewport().scrollOffset();
    tity.selectAll('.title ').boundingClientRect();
    tity.exec(function (res) { //执行请求
      wx.pageScrollTo({
        scrollTop: res[0].scrollTop + res[1][0].top,
      })

    })

扩展一下下

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

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()
}

转载地址： https://blog.csdn.net/Gqiangqiang/article/details/111768338?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166911252516800215069509%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=166911252516800215069509&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-111768338-null-null.142^v66control,201^v3control_1,213^v2t3_esquery_v2&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%20%7C%20%E9%A1%B5%E9%9D%A2%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E5%88%B0%E6%8C%87%E5%AE%9A%E4%BD%8D%E7%BD%AE&spm=1018.2226.3001.4187