问题概览：
小程序用 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写个脚本。
最后，嘻嘻！
原文链接也是本人原创。
