refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore" scrolltolower="loadMore"
1.通过程序将triggered设为true时,将触发onRefresh;
2.不管triggered为何值,在界面中下拉,也会触发onRefresh,但不会自动改变triggered值(不能双向绑定,这是问题的根本原因);
3.onRefresh执行完毕,不会自动触发onRestore(这是问题的表现),使得刷新图标一直显示,必须是triggered由true变为false,才会触发onRestore并隐藏刷新图标;如果triggered一直为false,或一直为true,都不会触发。
解决办法:
1.在进入onRefresh后,如果triggered为false,则将它置为true,当执行完你的刷新操作(通常是获取新的数据)后,将triggered置为false。
2.由于上一步中将triggered置为true,会再次触发onRefresh,故需再增加一个_freshing,表示是否正在执行刷新操作,在onRefresh中做判断,如_freshing为true,不执行刷新操作直接返回。
如果scroll-view有多个,要每个用自己的 triggered和refreshing来控制。
代码如下,和官方差不多,注意有关键的几个细节不同。
<script>
export default {
data() {
return {
triggered: false,
_freshing: false
}
},
onLoad() {
this._freshing = false;
setTimeout(() => {
this.triggered = true;//触发onRefresh来加载自己的数据,如果不用这种方式,不要在此改变triggered的值
}, 1000)
},
methods: {
onPulling(e) {
console.log("onpulling", e);
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
if (!this.triggered)//界面下拉触发,triggered可能不是true,要设为true
this.triggered = true;
setTimeout(() => {
this.triggered = false;//触发onRestore,并关闭刷新图标
this._freshing = false;
}, 3000)
},
onRestore() {
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
37 个评论
要回复文章请先登录或注册
Geewoo_c
1***@qq.com
1***@qq.com
3***@qq.com
5***@qq.com
Noah_wei
keledjh
是刘某人
1***@qq.com
1***@qq.com