推荐下载
-
2020-05-12 浏览：736
-
2020-05-06 浏览：518
-
2020-05-08 浏览：505
-
2020-04-04 浏览：501
-
2020-05-12 浏览：495
微信小程序之判断页面滚动方向
发布时间:2020-10-10
需求
微信小程序中如果判断页面滚动方向？
解决方案1.用到微信小程序API
2.获取页面实际高度
<!--WXML--> <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}}"> <image mode='aspectFill' class='list_img' src=http://www.yiyongtong.com/archives/"{{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 }) },- 上一篇：小程序中打开网页和pdf
- 下一篇：微信小程序抽奖-翻牌
