小程序踩坑記之——花屏/重複渲染數據

問題概覽：

小程序用 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寫個腳本。

最後，嘻嘻！

原文連接也是本人原創。