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

问题概览:

小程序用 wx:for 渲染节点时,会出现花屏现象,而且很诡异的是,这仅在iPhone X设备中发现。

截图详见我在小程序社区github中提的issue。

兼容问题:wx:for渲染列表时在iPhone X出现重复数据 (小程序社区)
wx:for会出现花屏或者重复渲染 (github)

问题排查:

原因1:当view组件包含多个子节点时,不能直接使用wx:for进行渲染,否则就会出现花屏或者重复渲染最后一条数据的问题。

原因2:当父节点有 flex-warp: wrap 与子节点 filter: drop-shadow(0rpx 0rpx 10rpx #c50000) 属性并存时,也会导致花屏。

解决方法:

原因1:

wx:for 所在节点改为 block 组件包裹子节点。

如 :

<view wx:for="{{albumList}}" wx:key="index" catchtap="jumpToGuide({{item}})" class="classic box" style="background-image: url('{{item.bg_img}}');">
  <view class="headTop">
    <view class="group">
      <text class="typeTitle">{{item.name}}</text>
      <text class="viceTitle">{{item.description}}</text>
    </view>
  </view>
  <view class="line"></view>
  <view class="footBottom">
    <view class="left">
      <view class="group">
        <text class="descript">当前关卡</text>
        <text class="value">{{item.count==item.step?'已通关':item.step}}</text>
      </view>
    </view>
    <view catchtap="jumpToRank({{item.id}})" class="right">
      <view class="group">
        <text class="descript">世界排行</text>
        <text class="value">{{item.ranking?item.ranking:0}}</text>
      </view>
    </view>
  </view>
</view>

修改后:

<block wx:for="{{albumList}}" wx:key="index">
    <view catchtap="jumpToGuide({{item}})" class="classic box" style="background-image: url('{{item.bg_img}}');">
      <view class="headTop">
        <view class="group">
          <text class="typeTitle">{{item.name}}</text>
          <text class="viceTitle">{{item.description}}</text>
        </view>
      </view>
      <view class="line"></view>
      <view class="footBottom">
        <view class="left">
          <view class="group">
            <text class="descript">当前关卡</text>
            <text class="value">{{item.step>=item.count?'已通关':item.step}}</text>
          </view>
        </view>
        <view catchtap="jumpToRank({{item.id}})" class="right">
          <view class="group">
            <text class="descript">世界排行</text>
            <text class="value">{{item.ranking?item.ranking:0}}</text>
          </view>
        </view>
      </view>
   </view>
</block>

修改即可解决问题。

原因2

取消子节点的 filter: drop-shadow(0rpx 0rpx 10rpx #c50000) 属性,将阴影加到图片资源中或使用box-shadow
另,带阴影的图片资源大小会翻几倍,推荐用 https://tinypng.com 进行压缩,同一张图片可多次压缩。
喜欢折腾的朋友可以根据它的api写个脚本。

最后,嘻嘻!

原文链接也是本人原创。

阅读 935

推荐阅读