这篇文章主要介绍了微信小程序之判断页面滚动方向的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序中如果判断页面滚动方向？
解决方案
1.用到微信小程序API
获取页面实际高度
监听用户滑动页面事件。
2.获取页面实际高度
<!--WXML--> <view> <view wx:for="{{List}}" wx:key="List{{index}}"> <image mode='aspectFill' src="https://www.jb51.net/{{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 }) },
PS:微信小程序滚动到某个位置改变效果
<scroll-view> <view>Some of the words<view> <view bindscroll="scroll"</view> </scroll-view>
//JS文件 //滚动监听 scroll: function (e) { this.setData({ scrollTop:e.detail.scrollTop }) }
其中，variable为全局变量，class1、class2即为相应的css
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: