下程序下拉可以使用默认的下拉刷新,方法是页面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) }) },基本就是这样了,动画效果可以根据自身修改,有问题可留言,
