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

发布时间：2020-12-14 19:36:34 所属栏目：资源来源：网络整理

导读：需求微信小程序中如果判断页面滚动方向？解决方案 1.用到微信小程序API 获取页面实际高度?nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 !--WXML-- view id = "box" class = "list" wx:for = " {{List}

需求

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

解决方案

1.用到微信小程序API

获取页面实际高度?nodesRef.boundingClientRect([callback])
监听用户滑动页面事件onPageScroll。

2.获取页面实际高度

<!--WXML-->
<view id="box">
   class="list" wx:for="{{List}}" wx:key="List{{index}}">
        <image mode='aspectFill' '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',136);">//仅为示例，并非真实的接口地址
      success: function(res) {
      // 如果该元素下面的数据是动态获取的，此方法在wx.request请求成功的回调函数中调用
        this.getScrollHeight()
      }
    })
  },

3.监听用户滑动页面事件

,this.data.scrollHeight)
    } else {
      //向上滚动 
      console.log('向上滚动 ',this.data.scrollHeight)
    }
    //给scrollTop重新赋值 
    this.setData({
      scrollTop: e.scrollTop
    })
  },

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!