refresher-triggered属性赋值为false并不能取消动画
====== 3.13自问自答系列======
不知为何已经被标记为已回答了,说是怎么这么久没有人理了。
最后自己找到了答案,是因为不同的scroll-view用了同一个变量来控制refresher-triggered,用独立的即可。
细说,代码如下
可以看到我渲染了多个 `tab` ,每个tab有一个 `scroll-view` ,但是我用了同一个 `flag`,也就是 `this.state.loding`,问题就来了,出问题了
使用一个数组分别做 `flag`,问题解决。
鲁静波 的回复是正确的
`ScrollView 是非受控组件,你需要在 onRefresherRefresh 时首先将 loading 状态设置为 true,待你的骚操作完成后再将 loading 状态设置为 false。`
在github分享了taro解决方案,hook写很清晰
import { ScrollView } from "@tarojs/components"; import React, { useState, useCallback } from "react"; ① 绑定loading const [loading, setLoading] = useState(false); ②绑定onFresh const onRefresherRefresh = useCallback(() => { setLoading(true) // getList(); // 异步获取数据 }, []); ③异步更新数据的时候loading设置为false const getList = () => { api.post(url, params).then(()=>{ setLoading(false); }).catch(()=>{ setLoading(false); }) } ④render里渲染: <ScrollView scrollY refresherTriggered={loading} refresherEnabled={true} onRefresherRefresh={onRefresherRefresh} className="cinemaOverview-ft" ></ScrollView>
同用taro,也遇到了这个问题,废了几个小时终于解决了。来回答下帮助需要的人:
参考链接:https://developers.weixin.qq.com/community/develop/doc/0000226ab349b831770a7b47e51400
原因:scroll-view组件的refresherTriggered属性为true时会触发onRefresherRefresh事件,这里就不停的循环展示loading了,所以需要添加一个flag,可参考官方代码实现https://developers.weixin.qq.com/s/hGFhMum67de0
这边是用Taro写的
ScrollView 是非受控组件,你需要在 onRefresherRefresh 时首先将 loading 状态设置为 true,待你的骚操作完成后再将 loading 状态设置为 false。
整个代码片段看看
bindrefresherrefresh ==> 调用接口,结束后loading设为false
并不能取消这个刷新状态。如果在同一个事件中现设为true再设为false,下来刷新效果都无法显示
看下是怎么写的?