微信小程序之判断页面滚动方向
- 作者: admin
- 发布于 2018-08-31 13:55:59
- 来源:
- 栏目:解决方案
导语: 需求 微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实
需求
微信小程序中如果判断页面滚动方向?
解决方案
1.用到微信小程序API
获取页面实际高度 nodesRef.boundingClientRect([callback])
监听用户滑动页面事件onPageScroll。
2.获取页面实际高度
<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>
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) { 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) } this.setData({ scrollTop: e.scrollTop }) },
参考:微信小程序如何判断页面上下滚动
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。