小程序下拉刷新-onPullDownRefresh不触发-可以通过scroll-view自定义下拉刷新

小程序下拉刷新-onPullDownRefresh不触发-可以通过scroll-view自定义下拉刷新

下程序下拉可以使用默认的下拉刷新,方法是页面json文件开启下拉刷新,js文件通过onPullDownRefresh事件调接口刷新数据

但是如果你的页面中是用的scroll-view,这样在scroll-view区域是无法触发下拉刷新事件的,这是因为scroll-view的限制,官方有讲的,

那么这个时候我们就只能通过自定义下拉刷新来实现了

其实不难官方都有讲的就是scroll-view这个的介绍里,并且有demo演示,文档入口

先看一下我的效果:(不满意或者不符合你的需求就跳过吧)

1.模板文件index.wxml

<scroll-view style="height:{{windowHeight - tabHeight - spacing}}px;"  
    scroll-y 
    bindscrolltolower="loadMore" refresher-enabled="{{true}}"
    refresher-triggered="{{refresherTriggered}}"
    refresher-threshold="{{60}}"
    refresher-default-style="none"
    refresher-background="#fff"
    bindrefresherpulling="onPulling" 
    bindrefresherrefresh="onRefresh"             
    bindrefresherrestore="onRestore" 
    bindrefresherabort="onErabort"
>
    <!--这里是下拉显示的效果-->
        <view slot="refresher" class="refresh-container disf faic" style="display:       block;width: 100%; height: 80px;  display: flex; align-items:center;justify-content:center;box-sizing: border-box;border-bottom:1px solid #f5f5f5">
            <view class="disf faic fc6" style="position: absolute;">
              <view class="disf faic" style="width:70rpx"><image animation="{{animation}}" class="top-arrow" mode="widthFix" src="/images/top-arrow.png"></image></view>
              <view style="width:300rpx;padding-right:30rpx">
                <view class="fz30 textac">{{refreshText}}</view>
                <view class="fz22 textac">上次更新时间：{{lastRefresh3}}</view>
              </view>
            </view>
        </view>
    <!--这里是数据-->
    <view>
    </view>
</scroll-view>

2.js文件index.js

/*onready中我创建了一个下拉时箭头旋转的动画*/
onReady: function () {
    _animation = wx.createAnimation({
      duration: 100,
      timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
      delay: 0,
      transformOrigin: '50% 50% 0'
    })
  },
  //执行动画的方法
  rotateAni: function (n) {
    _animation.rotate(-180 * (n)).step()
    this.setData({
      animation: _animation.export()
    })
  },
  //下拉没有松手执行此事件
  onPulling:function(e){
    //这个60对应wxml中的refresher-threshold值
    //超过这个阀值改变文字及箭头状态
    if(e.detail.dy>=60){
      if(_rotateNumber==0){//这个判断表示已经更改过状态了不用再次更改,否则频繁setdata耗性能
        this.setData({
          refreshText: '松开刷新数据'
        })
        this.rotateAni(++_rotateNumber)
      }
    //低于这个阀值还原状态
    }else{
      if(_rotateNumber==1){//这个判断表示已经更改过状态了不用再次更改,否则频繁setdata耗性能
        this.setData({
          refreshText: '下拉刷新'
        })
        this.rotateAni(--_rotateNumber)
      }
    }
  },
   //大于阀值并且松手了会触发刷新
  onRefresh:function(){
    var that = this;
    this.rotateAni(0)
    this.setData({
      refreshText: '正在加载'
    })
    //这里我们先等动画完毕再设置refresherTriggered: false,因为设置了它加载信息就隐藏了就看不到动画了
    setTimeout(function(){
      that.setData({
        refresherTriggered: false
      },100)
    })
    
    this.setData({
      list:[],
      page:1,
      end:false
    })
    this.getPractice();
    this.getAllClass();
  },
   //这是你下拉超过阀值然后没有松手又滑回去小于阀值,只做状态显示修改不触发更新
  onRestore:function(){
    var that = this;
    this.setData({
      refreshText: '下拉刷新'
    })
    this.rotateAni(0)
    setTimeout(function(){
      that.setData({
        refresherTriggered: false
      },100)
    })
  },
   //中断下拉,也是只做状态修改
  onErabort:function(){
    var that = this;
    this.setData({
      refreshText: '下拉刷新'
    })
    this.rotateAni(0)
    setTimeout(function(){
      that.setData({
        refresherTriggered: false
      },100)
    })
  },

基本就是这样了,动画效果可以根据自身修改,有问题可留言,