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

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序之判断页面滚动方向脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

需求

微信小程序中如果判断页面滚动方向

解决方案

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.data.scrollTop=e.scrollTop
    
  },

参考:微信小程序如何判断页面上下滚动

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序之判断页面滚动方向全部内容,希望文章能够帮你解决微信小程序之判断页面滚动方向所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。