收藏
回答

Scroll-View 自定义下拉刷新

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 微信安卓客户端 7.0.10.1580 2.10.2

refresher-triggered属性赋值为false并不能取消动画


====== 3.13自问自答系列======

不知为何已经被标记为已回答了,说是怎么这么久没有人理了。

最后自己找到了答案,是因为不同的scroll-view用了同一个变量来控制refresher-triggered,用独立的即可。

细说,代码如下

可以看到我渲染了多个 `tab` ,每个tab有一个 `scroll-view` ,但是我用了同一个 `flag`,也就是 `this.state.loding`,问题就来了,出问题了

使用一个数组分别做 `flag`,问题解决。

最后一次编辑于  2020-06-13
回答关注问题邀请回答
收藏

6 个回答

  • 马特:啊对对对
    马特:啊对对对
    07-15

    鲁静波 的回复是正确的


    `ScrollView 是非受控组件,你需要在 onRefresherRefresh 时首先将 loading 状态设置为 true,待你的骚操作完成后再将 loading 状态设置为 false。`
    
    07-15
    有用 1
    回复 1
    • 卡哇撒Ki
      卡哇撒Ki
      1天前
      正解,补充一下; bindrefresherpulling
      1天前
      回复
  • Ale-cc
    Ale-cc
    2021-03-11

    在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>
    
    2021-03-11
    有用 1
    回复
  • 保山
    保山
    2020-04-12

    同用taro,也遇到了这个问题,废了几个小时终于解决了。来回答下帮助需要的人:

    参考链接:https://developers.weixin.qq.com/community/develop/doc/0000226ab349b831770a7b47e51400

    原因:scroll-view组件的refresherTriggered属性为true时会触发onRefresherRefresh事件,这里就不停的循环展示loading了,所以需要添加一个flag,可参考官方代码实现https://developers.weixin.qq.com/s/hGFhMum67de0

    2020-04-12
    有用
    回复 1
    • 小叶子
      小叶子
      2020-08-07
      请教一下,你的代码例子里在onReady设置triggered的目的是什么?我并不想要一进来就自动下来刷新,能不能去掉?
      2020-08-07
      回复
  • Younntone
    Younntone
    2020-02-22

    这边是用Taro写的

    2020-02-22
    有用
    回复 9
    • 严骏(Sam)🐍
      严骏(Sam)🐍
      2020-02-25
      问题有解决吗,我这边也是同样的问题
      2020-02-25
      回复
    • 严骏(Sam)🐍
      严骏(Sam)🐍
      2020-02-25
      @楊
      2020-02-25
      回复
    • 鲁静波
      鲁静波
      2020-02-26
      好巧,我昨天也刚碰到这个问题,花了点时间定位到原因了。

      ScrollView 是非受控组件,你需要在 onRefresherRefresh 时首先将 loading 状态设置为 true,待你的骚操作完成后再将 loading 状态设置为 false。
      2020-02-26
      1
      回复
    • Younntone
      Younntone
      2020-02-28回复鲁静波
      我这么写就直接拉都拉不下来。
      2020-02-28
      回复
    • Younntone
      Younntone
      2020-02-28回复严骏(Sam)🐍
      解决了吗?我这里还没解决,暂时搁置了
      2020-02-28
      回复
    查看更多(4)
  • 子不语
    子不语
    2020-02-22

    整个代码片段看看

    2020-02-22
    有用
    回复 2
    • Younntone
      Younntone
      2020-02-28
      bindrefresherpulling ==> loading设置为true
      bindrefresherrefresh ==> 调用接口,结束后loading设为false
      并不能取消这个刷新状态。如果在同一个事件中现设为true再设为false,下来刷新效果都无法显示
      2020-02-28
      1
      回复
    • honwhy.wang
      honwhy.wang
      2023-10-16
      就是要让state感受到变化,才会触发页面update
      2023-10-16
      回复
  • 是小白啊
    是小白啊
    2020-02-22

    看下是怎么写的?

    2020-02-22
    有用
    回复
登录 后发表内容
问题标签