您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2018-08-31 13:55:59
  • 来源:  
  • 栏目:解决方案

导语: 需求 微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实

 

需求

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

解决方案

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     })   },

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部