我們有時會需要讓頁面自動滾動到某個位置（比如點擊頂部的目錄，滾動到下面對應內容的位置），那么在小程序中我們應該怎么做呢？

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

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() 獲取界面上的節(jié)點信息

可用于獲取顯示區(qū)域的尺寸、滾動位置等信息。

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

boundingClientRect(function callback)；

添加節(jié)點的布局位置的查詢請求。相對于顯示區(qū)域，以像素為單位。其功能類似于 DOM 的 getBoundingClientRect。返回 NodesRef 對應的 SelectorQuery

tity.exec(function (res) { //執(zhí)行請求
      wx.pageScrollTo({
        scrollTop: res[0].scrollTop + res[1][0].top,
      })
}

SelectorQuery.exec(function callback)

執(zhí)行所有的請求。請求結果按請求次序構成數組，在 callback 的第一個參數中返回。

//用戶點擊tab時調用
  titleClick: function (e) {
    // var that = this;
    var tity = wx.createSelectorQuery();
    tity.selectViewport().scrollOffset();
    tity.selectAll('.title ').boundingClientRect();
    tity.exec(function (res) { //執(zhí)行請求
      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()
}

轉載地址