微信小程序在開(kāi)發(fā)過(guò)程中，我們可能會(huì)需要判斷小程序頁(yè)面滾動(dòng)方向是向上，還是向下，那么該如何判斷呢，下面小編為大家解答。

 

微信小程序判斷頁(yè)面滑動(dòng)方向

解決方案

1.用到微信小程序API

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

2.獲取頁(yè)面實(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ù)請(qǐng)求 getDataList: function() { wx.request({ url: 'test.php', //僅為示例，并非真實(shí)的接口地址 success: function(res) { // 如果該元素下面的數(shù)據(jù)是動(dòng)態(tài)獲取的，此方法在wx.request請(qǐng)求成功的回調(diào)函數(shù)中調(diào)用 this.getScrollHeight() } }) },

3.監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件

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

KESION 科汛軟件

KESION 科汛軟件是國(guó)內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長(zhǎng)期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開(kāi)店SaaS社交電商服務(wù)平臺(tái)、在線教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營(yíng)銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過(guò)技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過(guò)科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！

▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多