uni-app 解决scroll-view下拉刷新无法正常恢复的问题

关于scroll-view组件的下拉刷新,无论是uni-app还是微信小程序,官方都说得不是很明白,有一个非常关键的关键规则没说清楚,组件属性例子:

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来控制。

代码如下,和官方差不多,注意有关键的几个细节不同。

exportdefault{ 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"); } } } exportdefault{ 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"); } } } exportdefault{ 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"); } } } exportdefault{ 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"); } } } exportdefault{ 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"); } } }

感谢 MartinYip 的分享!

原文地址:https://ask.dcloud.net.cn/article/id-37181__page-2

你可能感兴趣的:(uni-app 解决scroll-view下拉刷新无法正常恢复的问题)