兼容问题：wx:for渲染列表时在iPhone X出现重复数据
发布于 5 年前 作者 kyan 8598 次浏览 来自 问答

有朋友遇到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：


__
__

正常渲染时：


__
__

__
__

2 回复

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

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

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

回到顶部