小程序自定义下拉刷新

前言

由于官方提供的onPullDownRefresh下拉刷新,在我们自定义导航栏的情况下会把加载动画遮住,看了官方解释也是不能调动加载动画的位置,就只能是自定义下拉刷新了

正文

wxml

 <scroll-view scroll-y style="height: 100ch;" enable-back-to-top="true" bindscrolltolower='onReachBottom' 
        <!-- 监听布局touch事件 -->
        <view class='column' bindtouchstart='start' bindtouchend='end' bindtouchmove='move'>
              <!-- //刷新状态view -->
              <block wx:if="{{refreshBatch}}">
                    <view style='height:{{hei}}px;background:gray' class='lessNo'>{{desc}}</view>
              </block>
              <view wx:for="{list}">
                 正文内容
              </view>
         </view>
</scroll-view>

js

start(e) {
  this.setData({
    refreshBatch:true
  })
  //记录手指触摸是的y坐标
  sy = e.touches[0].clientY   
  console.log('开始触摸 sy : ' + sy + ' scrolltop : ' + this.data.scrolltop)
},
move(e) {
  //计算手指滑动的距离
  var delta = e.touches[0].clientY - sy
  console.log('delta : ' + delta)
  //scorll-view滑动到顶部且继续向上滑动时，走scorll-view滑动流程
  if(this.data.hei <= 0 && delta <= 0){
    return
  }
  //scorll-view已经滑动到顶部，继续下拉进入下拉状态
  if (this.data.scrolltop <= 0){
    if (this.data.isindrag == false){
      this.setData({
        isindrag: true
      })
    }
    var tempdelta = 0
    console.log('hei : ' + this.data.hei)
    if(delta > 0){//手指向下滑动
      if (this.data.hei > 50) {//触发阈值，更改状态
        this.setData({
          desc: '松开刷新'
        })
        tempdelta = this.data.hei + delta / (this.data.hei - 50)//增大下拉阻尼感
      } else {
        this.setData({
          desc: '下拉刷新'
        })
        //手指移动未到阈值，按正常滑动增加高度
        tempdelta = this.data.hei + delta
      }
    } else {//手指向上滑动
      tempdelta = this.data.hei + delta
      //刷新状态view最小为0
      if(tempdelta <= 0){
        tempdelta = 0
      }
      this.setData({
        desc: '下拉刷新'
      })
    }
    //滑动完成设置刷新view高度
    this.setData({
      hei: tempdelta
    })
  }
  //每次滑动事件后记录y坐标
  sy = e.touches[0].clientY
},
end(e) {
  var that = this
  console.log('手指离开')
  //控制刷新文字的显示隐藏
  this.setData({
    refreshBatch:false
  })
  //手指离开时，如果阈值大于等于50，则触发刷新
  if(this.data.hei >= 50){
    this.setData({
      desc: '正在刷新...'
    })
    this.setData({
      hei: 50
    })
    //模拟耗时操作，2秒后恢复正常状态
    setTimeout(function () {
      sy = 0
      that.setData({
        desc: '下拉刷新',
        hei: 0,
        isindrag: false,
        scrolltop: 0
      })
    }, 2000)
    
    this.setData({
      pageNo:1,    //更新单前页
      refreshBatch:true
    })
     //加载内容信息
     this.loadComment();
  }else{//未下拉到阈值，松开时则收起刷新view
    sy = 0
    that.setData({
      desc: '下拉刷新',
      hei: 0,
      isindrag: false,
      scrolltop: 0
    })
  }
},
scorll(e) {
  //未进入下拉状态时，记录scorll-view滑动距离顶部的距离
  var st = e.detail.scrollTop
  console.log('滚动 st : '+st)
  if (this.data.isindrag == false){
    this.setData({
      scrolltop: st
    })
  }
}

原文出处:https://www.it610.com/article/1282381264719986688.htm