属性说明
- refresher-triggered用于设置当前下拉刷新状态:
- true 表示下拉刷新已经被触发
- false 表示下拉刷新未被触发
- @refresherpulling用来定义自定义下拉刷新控件被下拉时触发的事件
- @refresherrefresh用来定义自定义下拉刷新被触发执行的事件
直接将refresher-triggered绑定的值改为false并不会关闭加载状态
解决方法
refresher-triggered的初始值为false,
要先变为true,执行完刷新操作之后再变为false才会有效果,所以在自定义下拉刷新控件被下拉时触发的事件中将值置为true并加一些延时再变为false才有了效果。
<template>
<view>
<scroll-view
scroll-y="true"
refresher-enabled="true"
:refresher-triggered="triggered"
@refresherpulling="onPulling"
@refresherrefresh="onRefresh"
>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
triggered: false
}
},
methods: {
onPulling() {
var that = this;
if (!this.triggered) {
//下拉刷新,先变true再变false才能关闭
this.triggered = true;
//关掉圈圈,需要先执行完刷新操作
setTimeout(() => {
that.triggered = false;
}, 1000);
}
},
onRefresh() {
// 自定义下拉刷新被触发执行
},
}
}
</script>