微信小程序自定义 下拉刷新
小程序的scroll-view已经可以支持下拉刷新了,此文章仅留存纪念
微信自带的下拉刷新 小程序官方文档 解释的比较清楚了;直接进入自定义下拉刷新:
因为自定义BarTitle 的原因,小程序自带的下拉刷新,对整个 page 中的内容都会有移动;所以只能自己写了;为了方便使用直接写成组件的形式;直接附源码:
wxml (主要绑定一些事件)
<image src='loading.png' mode='widthFix' class='refurbis-top' style='width: {{translateY/2}}%;'></image>
<scroll-view
scroll-y
class='scroll-view {{animateStatus ? "animate" : "" }}'
style='transform: translateY({{translateY || 0}}px);'
bindscrolltoupper='_upper'
bindscrolltolower='_lower'
bindtouchstart='_start'
bindtouchmove='_move'
bindtouchend='_end'
bindscroll='_scroll'
>
<slot />
</scroll-view>
<view class='load-bottom'>上拉可看到我</view>
css
.scroll-view{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #f6f6f6;z-index: 10;}
.animate{transition: all .4s;}
.refurbis-top{position: absolute;left: 50%;top: 0;z-index: 1;transform: translateX(-50%);width: 50%;}
.load-bottom{position: absolute;bottom: 0;z-index: 1;}
js
Component({
/**
* 组件的属性列表
*/
properties: {
upperThreshold: { // 距离顶部多少时 触发 upper
type: Number,
value: 50
},
lowerThreshold: { // 距离底部多少时 触发 lower
type: Number,
value: 50
},
angle: { // 指定角度内可以移动
type: Number,
value: .5
}
},
/**
* 组件的初始数据
*/
data: {
refurbish: true, // 是否开启下拉刷新 true 是 false 否
},
/**
* 组件的方法列表
*/
methods: {
_start: function (e) { // 记录开始位置
// console.log(e, '_start');
this.data.startClientX = Math.abs(e.changedTouches[0].clientX);
this.data.startClientY = Math.abs(e.changedTouches[0].clientY);
},
_move: function (e) { // 是否进行移动
// console.log(e, '_move');
if (this.data.refurbish) {
var clientX = Math.abs(e.changedTouches[0].clientX),
clientY = Math.abs(e.changedTouches[0].clientY),
startClientX = this.data.startClientX,
startClientY = this.data.startClientY,
upperThreshold = this.data.upperThreshold,
defaultAngle = this.data.angle;
var angle = (clientX - startClientX) / (clientY - startClientY);
if (Math.abs(angle) < defaultAngle){
let moveDistance = (clientY - startClientY) <= 0 ? 0 : (clientY - startClientY) / 2;
if (moveDistance < 0) return false; // 阻止方向滑出
this.setData({
translateY: moveDistance,
animateStatus: false
})
}
}
},
_end: function (e) { // 手势是否离开界面
// console.log(e, '_end');
let translateY = this.data.translateY;
if (translateY > 50) this.triggerEvent('scrolltoupper');
this.setData({
animateStatus: translateY > 50,
translateY: translateY > 50 ? 50 : 0
})
if (translateY > 50) setTimeout(() => {
this.setData({
translateY: 0,
animateStatus: true,
})
}, 1500)
},
_upper: function(e){ // 滚动到顶部触发
// console.log(e, '_upper');
this.data.refurbish = true;
},
_lower: function(e){ // 滚动到底部触发
// console.log(e, '_lower');
this.triggerEvent('scrolltolower');
},
_scroll: function(e){ // 是否滚动到顶部
// console.log(e, '_scroll');
var upperThreshold = this.data.upperThreshold;
if (e.detail.scrollTop < upperThreshold) this.data.refurbish = true;
else this.data.refurbish = false;
}
}
})
注意:组件 中 scroll-view 使用了 绝对定位,且宽高为 100%;
gitHub 地址:https://github.com/eitaqx/wx-refresh.git
在 scroll-view 不能使用的组件 请查看相关 文档
(希望这些可以对你有所帮助)