收藏
回答

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
回答关注问题邀请回答
收藏

15 个回答

  • 等闲识得东风面
    等闲识得东风面
    2021-03-29

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

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

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

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

    2021-03-29
    有用 2
    回复 1
    • Rex
      Rex
      11-07
      对uniapp app 也有用,赞
      11-07
      回复
  • 假装在摸鱼
    假装在摸鱼
    2021-06-08

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

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

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

    2021-06-08
    有用 1
    回复 1
    • Glenn Quagmire
      Glenn Quagmire
      2022-05-16
      醍醐灌顶,主要是我h5调试还不会有这问题,在真机上才会,无语死了
      2022-05-16
      回复
  • .Jun桑
    .Jun桑
    2021-05-26

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

    2021-05-26
    有用 1
    回复
  • 141
    141
    10-07

    上滑触顶加载的时候也会出现这种情况,添加完数据之后会自动回到顶部

    10-07
    有用
    回复
  • ѕυρєямαη
    ѕυρєямαη
    2023-06-21

    的确是v-if 导致了重绘的问题 我遇到的是我并没有使用scroll-view 自己封装的列表组件

    2023-06-21
    有用
    回复
  • 天地2333
    天地2333
    2023-06-16

    不用scroll-view不就好了,我是为了左右滑动而已,直接用css写在view上了

    2023-06-16
    有用
    回复
  • 王佳裕
    王佳裕
    2022-07-20

    都 2022 了还没解决?

    2022-07-20
    有用
    回复 2
    • 运行良好
      运行良好
      2022-10-08
      加了scroll-y="true" 后触底加载添加数据就没有回到顶部了
      2022-10-08
      1
      回复
    • 王佳裕
      王佳裕
      2022-10-18回复运行良好
      你测测数据量大了之后
      2022-10-18
      回复
  • 山野村夫
    山野村夫
    2022-06-14

    都 2022 了还没解决?官方的工作人员呢?

    2022-06-14
    有用
    回复
  • 小柒
    小柒
    2021-06-18

    有新的进展么

    2021-06-18
    有用
    回复
  • J.Wong
    J.Wong
    2021-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

            })


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

正在加载...

登录 后发表内容
问题标签