收藏
回答

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>
最后一次编辑于  03-18
回答关注问题邀请回答
收藏

3 个回答

  • 做你的太阳ღ₅₂₀¹³¹⁴
    做你的太阳ღ₅₂₀¹³¹⁴
    03-18

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

    给你写了个代码片段:

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

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


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

      所以推荐你使用长列表组件。
      https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html
      03-18
      1
      回复
    • 做你的太阳ღ₅₂₀¹³¹⁴
      做你的太阳ღ₅₂₀¹³¹⁴
      03-18回复Zaku
      这样的弊端是页面在二三十页后会卡。
      03-18
      回复
    查看更多(4)
  • linzx89757
    linzx89757
    03-25

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

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

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

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

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