微信小程序之判斷頁面滾動方向

崔曉明發(fā)布于2019-08-23 11:35 / 1019人閱讀

摘要：需求微信小程序中如果判斷頁面滾動方向解決方案用到微信小程序獲取頁面實際高度監(jiān)聽用戶滑動頁面事件。

需求

微信小程序中如果判斷頁面滾動方向？

解決方案

1.用到微信小程序API

獲取頁面實際高度 nodesRef.boundingClientRect([callback])
監(jiān)聽用戶滑動頁面事件onPageScroll。

2.獲取頁面實際高度

    /* JS */
  // 封裝函數(shù)獲取ID為box的元素實際高度 
  getScrollHeight: function() {
    wx.createSelectorQuery().select("#box").boundingClientRect((rect) => {
      this.setData({
        scrollHeight: rect.height
      })
      console.log(this.data.scrollHeight)
    }).exec()
  },
  // 假設(shè)數(shù)據(jù)請求
  getDataList: function() {
    wx.request({
      url: "test.php", //僅為示例，并非真實的接口地址
      success: function(res) {
      // 如果該元素下面的數(shù)據(jù)是動態(tài)獲取的，此方法在wx.request請求成功的回調(diào)函數(shù)中調(diào)用
        this.getScrollHeight()
      }
    })
  },

3.監(jiān)聽用戶滑動頁面事件

    //監(jiān)聽用戶滑動頁面事件
  onPageScroll: function(e) {
   
    if (e.scrollTop <= 0) {
     // 滾動到最頂部
      e.scrollTop = 0;
    } else if (e.scrollTop > this.data.scrollHeight) {
      // 滾動到最底部
      e.scrollTop = this.data.scrollHeight;
    }
    if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
      //向下滾動 
      console.log("向下 ", this.data.scrollHeight)
    } else {
      //向上滾動 
      console.log("向上滾動 ", this.data.scrollHeight)
    }
    //給scrollTop重新賦值 
    this.data.scrollTop=e.scrollTop
    
  },

參考：微信小程序如何判斷頁面上下滾動