MartinYip
MartinYip
  • 发布:2020-04-16 11:20
  • 更新:2024-01-11 00:30
  • 阅读:16207

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

分类:uni-app
关于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来控制。

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

<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>
19 关注 分享
m***@qq.com 1***@qq.com 4***@qq.com 是刘某人 1***@qq.com 1***@qq.com 1***@qq.com 2***@qq.com 1***@qq.com 以何为家 y***@126.com 1***@qq.com 1***@qq.com 1***@qq.com 2***@qq.com Meiwah w***@163.com xiaoxiaoka m***@163.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 Noah_wei :
解决了吗
2021-01-14 14:04
3***@qq.com

3***@qq.com

解决刷新的正确代码是我这个才对
```js
<script>
export default {
data() {
return {
triggered: false,
_freshing: false
}
},
onLoad() {
this._freshing = false;
///////////////////////////////这里不需要上面那个

},
methods: {
onPulling(e) {
console.log("onpulling", e);
},
onRefresh() {
if (this._freshing){
this.triggered=false;////////////////////这里才是关键
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>
```
2021-01-03 22:29
5***@qq.com

5***@qq.com

回复 wxsm :
是没用
2020-12-09 17:10
Noah_wei

Noah_wei

回复 keledjh :
我也碰到了,列表上滑会出现刷新
2020-09-28 11:41
keledjh

keledjh

加载数据函数放哪个位置,我反复测试,发现往下拖,没有到顶部之前,时始终会出现onrefresh加载。这样我在往下拖浏览的时候会出现跳动。不管settimeout设置的时间长短,都是这个问题
2020-09-24 11:48
是刘某人

是刘某人

写的很好,完美解决问题
2020-09-18 11:27
1***@qq.com

1***@qq.com

为啥看不到评论....
2020-09-09 17:01
1***@qq.com

1***@qq.com

搞了一下午这个,看你这个解释才弄好,那个文档搞得我一脸懵逼,太坑了
而且小程序上开发者工具还不能调试这个,只能真机测试
2020-09-09 17:01
1***@163.com

1***@163.com

triggered初始false
refresherrefresh里设置this.triggered = 'triggered';
执行完数据请求在设置triggered = false;
2020-07-30 16:20
1***@qq.com

1***@qq.com

你这个样子好像只能下拉刷新一次
2020-07-30 15:55