微信小程序怎么判断页面滑动方向

本文小编为大家详细介绍“微信小程序怎么判断页面滑动方向”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序怎么判断页面滑动方向”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

微信小程序判断页面滑动方向

解决方案

1.用到微信小程序API

获取页面实际高度 nodesRef.boundingClientRect([callback])
监听用户滑动页面事件onPageScroll。

2.获取页面实际高度

<!--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 */ // 封装函数获取ID为box的元素实际高度 getScrollHeight: function() { wx.createSelectorQuery().select('#box').boundingClientRect((rect) => { this.setData({ scrollHeight: rect.height }) console.log(this.data.scrollHeight) }).exec() }, // 假设数据请求 getDataList: function() { wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 success: function(res) { // 如果该元素下面的数据是动态获取的，此方法在wx.request请求成功的回调函数中调用 this.getScrollHeight() } }) },

3.监听用户滑动页面事件

//监听用户滑动页面事件
  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
    })
  },

读到这里，这篇“微信小程序怎么判断页面滑动方向”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。