微信小程序怎么判斷頁面滑動方向

本文小編為大家詳細(xì)介紹“微信小程序怎么判斷頁面滑動方向”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序怎么判斷頁面滑動方向”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

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

解決方案

1.用到微信小程序API

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

2.獲取頁面實(shí)際高度

<!--WXML-->
<view id="box">
   <view class="list" wx:for="{{List}}" wx:key="List{{index}}"><image mode='aspectFill' class='list_img'  src="{{item.imgUrl}}"  ></image>
   </view>
</view>

/* JS */ // 封裝函數(shù)獲取ID為box的元素實(shí)際高度 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', //僅為示例，并非真實(shí)的接口地址 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.setData({
      scrollTop: e.scrollTop
    })
  },

讀到這里，這篇“微信小程序怎么判斷頁面滑動方向”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。