解决scroll-view在微信小程序和uni-app下拉刷新后刷新条无法正常恢复的问题
程序员文章站
2022-03-04 14:38:03
关于scroll-view,在Uni-app和小程序中 refresher-triggered="{{triggered}}" bindrefresherpulling="onPulling" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore"1.不管triggered为何值,在界面中下拉,都会触发onRefresh,但不会自动改变triggered值(不能双向绑定,这是问题的...
关于scroll-view,在Uni-app和小程序中
refresher-triggered="{{triggered}}"
bindrefresherpulling="onPulling"
bindrefresherrefresh="onRefresh"
bindrefresherrestore="onRestore"
1.不管triggered为何值,在界面中下拉,都会触发onRefresh,但不会自动改变triggered值(不能双向绑定,这是问题的根本原因);
2.onRefresh执行完毕,不会自动触发onRestore(复位)(这是问题的表现),使得刷新图标一直显示,必须是triggered由true变为false,才会触发onRestore并隐藏刷新图标;
所以我们在执行onRefresh的时候需要判断是否在刷新中,是的话,就不执行刷新,直接return,否的话,就执行刷新方法,将triggered值设置为true!!!
最后定时调度,再将triggerde设置为false,然后这个就会在刷新后,自己调用onRestore自己复位了,代码如下
自己先定义Isfreshing=false
onRefresh() {
if (this.Isfreshing) return;
this.Isfreshing = true;
if (!this.triggered)//保证刷新状态下,triggered为true
this.triggered = true;
setTimeout(() => {
this.triggered = false;//触发onRestore,关闭刷新图标
this.Isfreshing = false;
}, 1200)
},
},
遇到微信小程序开发的问题,大部分的原因可能都是由于无法双向绑定造成的,遇见一般小一些的问题,所以多考虑自己写函数方法去尝试解决值的变动。
本文地址:https://blog.csdn.net/weixin_43722571/article/details/112554726
上一篇: 深入浅出理解PHP原理之变量赋值
下一篇: vue指令笔记