收藏
回答

scrollview组件顶部追加新数据时滚动条会直接跳到顶部

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scrollview 客户端 7.0.0 2.4.2

scrollview组件顶部追加新数据时滚动条会直接跳到顶部,而如果在底部追加新数据滚动条不会跳变。想实现类似微信聊天页面向下滑动拉取历史消息,但拉取完历史消息后不要直接跳转到顶部。目前小程序的scrollView会直接跳转到顶部了。


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


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

14 个回答

  • 大猪蹄子
    大猪蹄子
    2019-05-13

    同样遇到该问题

    1、第一次使用 wx.createSelectorQuery();获取加载前第一个消息view的top值,然后 setData({ scrollTop: _scrollTop}),scroll-view会闪烁一次

    2、第二次使用 scroll-view 的 scroll-into-view 的属性,但是任然有一次闪烁,体验很差


    建议官方去查看 antd-mobile 中的 ListView,同样的在顶部插入新DOM,滚动条会保持在原先的位置上,并且页面不会闪烁,用户无感,体验很好


    望官方快快解决该问题

    2019-05-13
    有用 5
    回复 1
    • neo
      neo
      2019-11-04
      解决没
      2019-11-04
      回复
  • iven~zf
    iven~zf
    2020-09-26

    我把整个scroll-view上下颠倒,然后把里面每个元素也上下颠倒,这下下拉刷新,就利用的是下拉加载更多。。。这样就不会都抖动了,只是比较猥琐。。大家可以参考,还有其他优雅的办法么?

    2020-09-26
    有用 3
    回复 3
    • 黑暗森林
      黑暗森林
      2021-07-07
      骚操作,可以
      2021-07-07
      回复
    • wenbo
      wenbo
      2021-07-14
      哈哈哈哈哈,完成需求就行了,什么优不优雅的🐶
      2021-07-14
      回复
    • 倒挂绿毛幺凤
      倒挂绿毛幺凤
      2021-07-29
      这样安卓机会有问题,每次下拉到顶部加载数据后不能直接向上滚,需要往下回滚一下再向上才能继续
      2021-07-29
      回复
  • 深圳花儿绽放网络科技股份有限公司
    深圳花儿绽放网络科技股份有限公司
    2019-01-04

    scrollview添加srollIntoView属性:

    <scroll-view scrollY bindscrolltoupper="loadChatHistory" scrollIntoView="{{toview}}">


    每次加载完新数据都更新一下这个值

    that.setData({
          chat_content: chat_content,
          toview: "m" + (chat_content.length - 1)
    });


    2019-01-04
    有用 3
    回复 2
    • 胡先生
      胡先生
      2019-01-04

      你好,谢谢你的回复,我的代码片段里已经加了scrollIntoView属性了,但是往上下载的时候会先到顶部然后跳转到指定的scrollIntoView位置,可以打开我的代码片段看看例子,非常感谢

      2019-01-04
      回复
    • neo
      neo
      2019-11-04回复胡先生
      解决没
      2019-11-04
      回复
  • Edon-
    Edon-
    2021-06-07

    用 useRef 去追踪 scrollTop 的值,伪代码:

    function Page() {
      const scrollTop = React.useRef();
    
      function handleScroll(event) {
        scrollTop.current = event.detail.scrollTop;
      }
    
      return <ScrollView onScroll={handleScroll} scrollY={true} scrollTop={scrollTop.current} />
    }
    
    2021-06-07
    有用 2
    回复
  • 小柒
    小柒
    2021-06-18

    有新的进展么

    2021-06-18
    有用 1
    回复
  • 郭大侠
    郭大侠
    2020-09-28

    我加了个scrollTop就可以了,每次加载数据前设置下

    2020-09-28
    有用 1
    回复
  • DeathPoet
    DeathPoet
    2021-11-26

    解决于今日,setData同时设置list数据和scroll-into-view的变量即可

    2021-11-26
    有用
    回复
  • hope
    hope
    2021-09-30

    同样的问题,官方快出个解决方案吧

    2021-09-30
    有用
    回复
  • 你看上去很美味的样子
    你看上去很美味的样子
    2021-06-15

    这个问题竟然还没解决吗???

    2021-06-15
    有用
    回复
  • 波子
    波子
    2020-09-23

    同样遇到这个问题,顶部插入数据时,直接就跳到顶部了。

    想要像微信那样,插入上方数据,但是不跳到顶部。

    有解决的麻烦@一下,谢谢大家。

    2020-09-23
    有用
    回复

正在加载...

登录 后发表内容