微信小顺序之推断页面转动方向

需求

微信小顺序中假如推断页面转动方向?

解决方案

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.data.scrollTop=e.scrollTop
    
  },

参考:微信小顺序怎样推断页面高低转动

    原文作者:月影
    原文地址: https://segmentfault.com/a/1190000016197342
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞