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

問題概覽：

小程序用 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.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>

修改即可解決問題。

 

原因2：

取消子節點的   filter: drop-shadow(0rpx 0rpx 10rpx #c50000)  屬性，將陰影加到圖片資源中。

另，帶陰影的圖片資源大小會翻幾倍，推薦用 https://tinypng.com進行壓縮，同一張圖片可多次壓縮。

喜歡折騰的朋友可以根據它的api寫個腳本。

 

最后，嘻嘻！