心路历程:小程序底栏采用了fixed定位,导致页面滚动时ios手机出现底栏闪动,为了解决这个问题,将page滚动改为scroll-view,从而引发了下拉刷新失效,因为页面需要监控scroll滚动,不得已需要舍弃onPullDownRefresh,自定义了一个比较简单的下拉刷新,效果图如下:下拉松手1s后刷新并回弹。
tempalte:将刷新代码放入scroll-view,loading动画我采用了vant组件,这个可以自己随意发挥
<scroll-view
scroll-y="true"
bindscroll="toScroll"
bindtouchstart="touchStart"
bindtouchend="touchEnd"
bindtouchmove="touchMove"
style="height: 100vh"
>
<view class="refresh" animation="{{showLoad}}">
<view class="load-animation">
<van-loading type="spinner" />
</view>
</view>
...
data:showLoad是控制下拉和回弹的动画变量,此处的动画是根据高度变化取得的,showRefresh判断是否显示了下拉刷新
data: {
startY: '',
showLoad: '', // 下拉刷新动画
showRefresh: false, // 是否显示下拉刷新组件
methods中定义下拉方法(重点)
touchStart(e) {
this.setData({
startY: e.changedTouches[0].pageY,
})
},
// 触摸移动
touchMove(e) {
let endY = e.changedTouches[0].pageY
let startY = this.startY
let dis = endY - startY
// 判断是否下拉
if (dis <= 0) {
return
}
if (dis < 60) {
// 下拉60内随下拉高度增加
this.move = wx.createAnimation({
duration: 0,
timingFunction: 'linear',
delay: 0,
})
this.move.height(dis).step()
this.setData({
showLoad: this.move.export(),
})
// console.log(222222, dis)
}
// 滑动距离大于20开始刷新
this.showRefresh = dis > 20
},
// 触摸结束
touchEnd(e) {
if (this.showRefresh) {
// 在此执行下拉后的刷新操作
this.init()
}
//1s后回弹
setTimeout(() => {
// 创建动画实例
this.animation = wx.createAnimation({
duration: 300,
timingFunction: 'ease',
delay: 0,
})
this.animation.height(0).step()
this.setData({
showLoad: this.animation.export(),
})
this.showRefresh = false
}, 1000)
},
初始化样式,高度为0
.refresh {
width: 100%;
height: 0;
flex-center(); // 使用了stylus函数,flex居中
}