微信小程序之判断页面滚动方向的示例代码

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

解决方案

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

PS:微信小程序滚动到某个位置改变效果

<scroll-view>
<view>Some of the words<view>
<view bindscroll="scroll" class="{{variable>200 ? 'class1' : 'class2'}}"</view>
</scroll-view>

//JS文件
 //滚动监听
 scroll: function (e) {
 this.setData({
 scrollTop:e.detail.scrollTop
 })
 }

其中，variable为全局变量，class1、class2即为相应的css