收藏
回答

兼容问题:wx:for渲染列表时在iPhone X出现重复数据

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 6.7.0 2.2.5

有朋友遇到wx:for渲染的列表在iPhone X上面会出现重复渲染最后一条数据的问题吗?


使用工具:

wepy 1.7.2


问题简介:

在页面来回切换过程中才会出现,且目前只在iPhone X上发现(见附1);

接口返回的数据没问题,但是渲染时只渲染接口返回的数据中的最后一条。


排查过程:

  1. 尝试使用onHide() 和 onUnload()在页面切换时将渲染的数组清空,但这样又出现了新的问题,渲染出来的图片会花屏(见附2);

  2. 尝试去掉animate.css动画,仍然出现;

  3. 尝试将background-image改为绝对布局的image,仍然出现。


涉及的代码:

wxml:

<view class="albumChoiceOuter">
      <scroll-view upper-threshold="50" scroll-y bindscrolltolower="imLower" bindscrolltoupper="scrollUp" class="albumChoice box">
        <view wx:if="{{albumList.length!=0}}" wx:for="{{albumList}}" catchtap="jumpToGuess({{item}})" wx:key="index" class="albumLine box" style="background-image: url('{{item.bg_img}}')">
          <view class="topBox">
            <view class="topTitle">
              <text class="albumName">{{item.name}}</text>
              <text class="albumDesc">{{item.description}}</text>
            </view>
          </view>
          <view class="line"></view>
          <view class="bottomBox">
            <view class="block left">
              <text class="scoreName">最好成绩</text>
              <text class="scoreValue">{{item.max}}</text>
            </view>
            <view catchtap="jumpToRank({{item.id}})" class="block right">
              <text class="scoreName">挑战次数</text>
              <text class="scoreValue">{{item.count}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <text wx:if="{{isSlided==false}}" class="slideTips">滑动还有更多哦!</text>
      <text wx:else class="slideTips">到底啦</text>
    </view>


js:


getIndex() {
  wepy.showLoading({
    title: '加载中...', //提示的内容,
    mask: true, //显示透明蒙层,防止触摸穿透,
    success: res => {}
  });
  api.getIndex({
    openid: this.userInfo.openid,
    page: 1,
    /* 第几页歌单,默认1 */
    page_size: 100,
    /* 每页多少歌单,默认10 */
    // game_type: 2,
  }).then((result) => {
    console.log(result)
    if (result.errorCode == 0) {
      setTimeout(()=>{
        this.albumList = result.data.song_list
        this.$apply()

      }, 10)

wepy.hideToast();

    }
  }).catch(err=>{
    console.log(err)
  })
}



附1:



附2:



正常渲染时:




最后一次编辑于  2018-09-17
回答关注问题邀请回答
收藏

2 个回答

  • 2019-07-17

    已解决,解决办法见我的笔记。普通H5同样也有这种问题(主要出现在iPhone X及以上部分机型,部分是因为也有发现iPhone X兼容filter属性的情况,是的没错俺测试了n台iPhone X设备)

    小程序踩坑记之——花屏/重复渲染数据

    2019-07-17
    有用
    回复
  • 是小白啊
    是小白啊
    2018-09-18

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-09-18
    有用
    回复 5
    • 2018-09-28

      你好,已解决。


      <block wx:for="{{list}}">
          <view>
              ...
              ... 其他节点
              ...
          </view>
      </block>


      2018-09-28
      1
      回复
    • AUV
      AUV
      2019-05-14回复

      您有H5网页遇到过此问题吗,怎么解决?我们现在是跟您问题一样花屏,也有加载同一条数据的情况。


      2019-05-14
      回复
    • 2019-07-17回复AUV
      已解决了,你看下是不是用了filter属性来写阴影。
      2019-07-17
      回复
    • 2019-07-17回复AUV
      抱歉,太久没上论坛,没开启通知。
      2019-07-17
      回复
    • 慢慢。
      慢慢。
      2020-12-21回复
      我也是用 filter: drop-shadow 来写阴影了,然后某个 iOS 设备就花屏了
      2020-12-21
      回复
登录 后发表内容