收藏
回答

scroll-view中的scroll-anchoring属性不生效是什么原因?

设置scroll-anchoring为true,向scrollView添加元素,列表中的旧的元素依然会被顶下去,而不是锚定在添加元素之前的位置,有没有scroll-anchoring的具体使用demo

下面是代码片段:

https://developers.weixin.qq.com/s/bBhPVjmy7ocV


回答关注问题邀请回答
收藏

8 个回答

  • e🌈
    e🌈
    2020-12-01

    可以通过scroll-view 去调用 onPullDownRefresh 方法,然后将数据塞回scroll-view 中。

    注意点如下:

    1. scroll-view 中 列表渲染组件的key 必须不为数字,日期,最好为英文字符。
    2. scroll-view 当scrollTop <= upper-threshold的时候塞入数据无效


    解决方案:

    1. 维护一个类似组件的下拉刷新有一个refresher-triggered 的 property。
    2. 维护一个内部(所谓内部就是不加入渲染的状态)值当 upper-threshold<scrollTop<给定的threshold的时候置为true,否则置为false 。以下为 onscroll 处理方法:

    3.在页面中处理 refresh 事件, 如果你想要的话可以调用 wx.startPullDownRefresh 使页面出现动画效果。

    注意:在组件刷新的过程中必须要将 scroll-y 置为false:

    刷新完成后再置为true 即可

    2020-12-01
    有用 2
    回复 6
    • 👊👊👊🇨🇳
      👊👊👊🇨🇳
      2021-08-24
      6666
      2021-08-24
      回复
    • kevin_chen
      kevin_chen
      2022-09-29
      牛逼,我没有用下拉刷新,用的是触订加载,聊天场景。有两个比较关键的地方吧,一个是wx:key必须改,不能用index,第二个是获取数据的时候就让scroll-y等于false,锁定他,数据加载完了,已经setdata了,再放开,这样连抖动都没有了,而且IOS和安卓的问题同时解决了!!
      2022-09-29
      1
      回复
    • kevin_chen
      kevin_chen
      2022-09-29
      “scroll-view 当scrollTop <= upper-threshold的时候塞入数据无效”这一条其实不太懂,因为如果是触顶加载的的话,肯定要scrollTop<=upper-threshold才能触发呀,如果要不抖动的话,肯定会保持scrollTop<=upper-threshold的情况下加载数据呀,确实没太懂,不过已经解决了。。
      2022-09-29
      回复
    • 叫啥好呢
      叫啥好呢
      2023-11-23回复kevin_chen
      这样还会回到顶部啊  执行setData 就会回到顶部
      2023-11-23
      回复
    • kevin_chen
      kevin_chen
      2023-12-07回复叫啥好呢
      再回首,我已经看不懂自己说了什么了,哈哈哈哈
      2023-12-07
      回复
    查看更多(1)
  • 西赛德李
    西赛德李
    2019-11-11

    在 wx:for 里设置有效的 wx:key 可以解决这个问题

    2019-11-11
    有用 1
    回复 5
    • 2019-11-11
      加了wx:key还是不行,添加新数据还是会把旧数据顶下去
      2019-11-11
      回复
    • 西赛德李
      西赛德李
      2019-11-11回复
      https://developers.weixin.qq.com/s/qoE6INms7Pcj 这我刚写的demo,试一下
      2019-11-11
      回复
    • 2019-11-11回复西赛德李
      谢谢,看了一下一条一条的加确实没有问题,但是好像跟scroll-anchoring没有关系,因为我去掉这个属性他也不会被顶动,我再试试多条添加有没有问题
      2019-11-11
      回复
    • 西赛德李
      西赛德李
      2019-11-12回复
      Android 上默认启用了锚定,所以去掉 scroll-anchoring 也没关系,但 iOS 上得显式写明 scroll-anchoring="{{true}}"   话说多条添加的效果怎么样?
      2019-11-12
      回复
    • Pinellia
      Pinellia
      2020-06-03回复西赛德李
      下拉加载的时候就没有效果了  适用场景聊天页面
      2020-06-03
      回复
  • 波子
    波子
    2020-09-23

    同样遇到顶部插入数据的需求,也是插入数据后,直接就是到顶部了。

    同求破法。

    2020-09-23
    有用
    回复 1
    • 王鑫
      王鑫
      2022-11-07
      有结论嘛
      2022-11-07
      回复
  • UNMI
    UNMI
    2020-08-24
    1. wx:for="{{list}}" list的item必须是obj, 2. scroll-top 不是0时生效
    2020-08-24
    有用
    回复
  • ᥬᥬ[大笑]᭄᭄
    ᥬᥬ[大笑]᭄᭄
    2020-06-23

    这个问题很坑啊,这也不好用,那也不好用,唉

    2020-06-23
    有用
    回复 1
    • e🌈
      e🌈
      2020-12-01
      看看我的回复
      2020-12-01
      回复
  • 维塔斯的星星
    维塔斯的星星
    2019-12-16

    我试了确实也不行,有解决方案么?急~~~

    2019-12-16
    有用
    回复
  • 灵芝
    灵芝
    2019-10-22

    看下基础库版本,这个属性从基础库2.8.2开始支持

    另外,需要这样写:


    2019-10-22
    有用
    回复 2
    • 2019-10-22
      好的,改过来发现还是不好用
      2019-10-22
      回复
    • Kin
      Kin
      2020-01-02
      试了一下,还是不生效哦,请问还有别的办法吗
      2020-01-02
      回复
  • lingk
    lingk
    2019-10-22

    仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性

    2019-10-22
    有用
    回复 1
    • 2019-10-22
      ios也不行啊
      2019-10-22
      回复
登录 后发表内容
问题标签