收藏
回答

scroll-view 追加数据会自动回到顶部,请问怎样解决?

没有把数组值全部替换,是不断将数据追加push进数组。

基础库版本:2.10.3

const updateList = `tabs[${activeTab}].list[${page}]`
const updatePage = `tabs[${activeTab}].page`
this.setData({
    [updateList]: res,
    [updatePage]: page + 1
})


<!-- 这是自定义组件的内部WXML结构 -->
<scroll-view class="tab-content" enable-back-to-top="{{true}}" scroll-y="{{true}}" scroll-anchoring="{{true}}" lower-threshold="100" bindscrolltolower="updateGameList">
    <view class="game-card-wrap" wx:for="{{gameListWrap}}" wx:for-item="gameList" wx:for-index="gameListIdx" wx:key="gameListIdx">
        <view class="game-card" hover-class="hover-class" hover-start-time="100" wx:for="{{gameList}}" wx:for-item="game" wx:for-index="gameIdx" wx:key="gid">

        </view>
    </view>
</scroll-view>
最后一次编辑于  2020-03-18
回答关注问题邀请回答
收藏

10 个回答

  • 热心的裴同学
    热心的裴同学
    03-29

    提供一个解决这个问题的思路

    1. 给每一个列表元素加上唯一id
    2. 添加scroll-view 的 scroll-into-view 属性
    3. 在修改列表数组之前 给 scroll-into-view 设置为当前能够被展示的一个元素的id

    解释: scroll-into-view 的元素 如果出现在画面中是不会出现效果的 这样就可以先让他指定为一个位置再去添加内容就不会跑到其他位置了

    在做聊天消息列表使用了这个方法,希望能够帮助到大家

    03-29
    有用 1
    回复
  • 小柒
    小柒
    06-18

    有新的进展么

    06-18
    有用
    回复
  • 假装在摸鱼
    假装在摸鱼
    06-08

    使用uniapp的时候遇到过类似问题,也是加载更多时会自动跳转到列表顶部。

    我遇到的问题产生原因是srcoll-view标签有v-if,每次加载数据成功时v-if的false和true的切换会导致srcoll-view重新渲染,滚动条就会回到顶部。

    试试去掉v-if的判断看会不会重现

    06-08
    有用
    回复
  • .Jun桑
    .Jun桑
    05-26

    好像 去掉 “enhanced” 这个属性就可以了。 没仔细去研究。

    05-26
    有用
    回复
  • J.Wong
    J.Wong
    01-15

    遇到同样的问题,不过我的 html 结构是 tabs 组件里头包裹了一层 scroll-view ,当我 scroll-view 加载更多(list 数据没有使用二维数组),scroll-view 页面会跳到顶部;

    经过测试,我修改 tabs 组件,将其 swiper 删除,用 slot (name=tab-content-0) 来代替,加载更多后,就没有出现跳到顶部的问题了

    结构见下图(图片标注有误,应该是tabs[0].list 一维数组)

        tabs: [{

          title: '全部',

          orders: [],

          pageNumber: 1,

          hasMore: false

        },

    ...]


            this.setData({

              tabs: tabsData

            })


    01-15
    有用
    回复 1
    • J.Wong
      J.Wong
      01-16
      问题已解决。。。和楼上@linzx89757兄弟判断的原因一致:组件里嵌套了 scroll-view。。。只要在 scroll-view 外不使用 tabs 组件,直接拷贝并改造 tabs 源码,搬进来在swiper-item 里嵌套 scroll-view 就解决了,也不需要二维数组(当然数据多的话,二维数组更高效)
      01-16
      1
      回复
  • 、定格子
    、定格子
    2020-11-09

    请问解决了吗?

    2020-11-09
    有用
    回复
  • 十一同学
    十一同学
    2020-07-20

    我也遇到同样的问题了 楼主 不知道你有没有解决,麻烦指点下,我这边只在ios 上会复现

    2020-07-20
    有用
    回复
  • 林志鑫
    林志鑫
    2020-03-25

    渲染数组时,我也是采用二维数组,每次setData都只更新本次请求得到的数据。比每次都更新整个数组要高效,所以二维数组是可取的。

    2020-03-25
    有用
    回复 7
    • Scofield
      Scofield
      2020-03-25
      是的,我也觉得这样子比较好。
      2020-03-25
      回复
    • 林志鑫
      林志鑫
      2020-03-25
      我也是用scroll-view自己封装了一个自定义组件,单独使用时正常,但是当我把它用在另一个自定义组件中时,就出现了触底加载反弹的现象。另一个自定义组件用了swiper封装,为了做多类别切换展示,而数据需要上滑加载,所以用scroll-view封装的自定义组件做了它的slot。
      2020-03-25
      回复
    • 林志鑫
      林志鑫
      2020-03-25
      找不到解决方案后,我试着不用封装的swiper自定义组件,而是直接在页面上用swiper基础组件,就没有这个问题了。所以我觉得,或许是自定义组件嵌套太多造成的bug
      2020-03-25
      回复
    • 林志鑫
      林志鑫
      2020-03-25回复Scofield
      你是单独使用你封装的组件,就出现了这种情况吗
      2020-03-25
      回复
    • Scofield
      Scofield
      2020-03-25回复林志鑫
      是的,不过已经解决了。发现造成这个现象的原因是同时更新了一个对象上的列表数据和其他数据,比如
      2020-03-25
      回复
    查看更多(2)
  • PandoraBox
    PandoraBox
    2020-03-18

    没遇到过 我也是 push写的,没有返回顶部。

    给你写了个代码片段:

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

    2020-03-18
    有用
    回复 9
    • Scofield
      Scofield
      2020-03-18
      感谢,我去看看这个组件,不过还想问一下你是怎么 push 数据的,我看文档好像只能 concat 然后整个替换,或者像我这样用二维数组,能提供一点简单的代码学习一下吗
      2020-03-18
      回复
    • PandoraBox
      PandoraBox
      2020-03-18回复Scofield
      你应该push到this.data.list这个数组下。
      比如:
      js:
      list: [a,b,c]


      addmore() {
        const { list } = this.data
        //调用接口请求到的第二页数据,假如返回的数组叫results
        results.map((item) => {
          list.push(item)
        })
        this.setData({
           list
        })
      }
      2020-03-18
      回复
    • Scofield
      Scofield
      2020-03-18回复PandoraBox
      这样子确实没问题,不过list数据会越来越大,大了之后可能会超过限制
      2020-03-18
      回复
    • PandoraBox
      PandoraBox
      2020-03-18回复Scofield

      所以推荐你使用长列表组件。
      https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html
      2020-03-18
      1
      回复
    • PandoraBox
      PandoraBox
      2020-03-18回复Scofield
      这样的弊端是页面在二三十页后会卡。
      2020-03-18
      回复
    查看更多(4)
  • Scofield
    Scofield
    2020-03-18

    https://developers.weixin.qq.com/community/develop/doc/0008c46e0a04586d86e7dbd2e5bc00?_at=1584495477343

    这里有个去年的相关问题,不过没人解决。。。

    2020-03-18
    有用
    回复 6
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-03-18
      你上面发的这个是顶部插入数据,这个是会回到顶部。你用scroll-into-view来解决吧。目前没有更好的办法。
      但是你今天发的新帖,这个我理解的应该是尾部追加的数据,尾部追加的话应该是直接尾部显示数据不会回到顶部。
      2020-03-18
      1
      回复
    • Scofield
      Scofield
      2020-03-18回复Admin²⁰²¹
      你看代码,page每次会加一,是往list后面追加数据,我这边测的追加数据顺序没问题,就是会跑到顶部。。。
      2020-03-18
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-03-18
      你这代码setData的是tabs[xxx].list[yyy]的值,但是wxml渲染的是gameListWrap里面的值。所以我看不出来gameListWrap的数据从哪来的
      2020-03-18
      1
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-03-18
      但是我能肯定如果是尾部追加的方式,不是整个重写,scroll-view在追加后不应该会跳到顶部。
      2020-03-18
      1
      回复
    • Scofield
      Scofield
      2020-03-18回复Admin²⁰²¹
      感谢解答,我再想想别的办法吧。
      2020-03-18
      回复
    查看更多(1)
登录 后发表内容
问题标签