标签：HTAP otto iphone x 父节点 top span head 它的 content
小程序用 wx:for 渲染节点时，会出现花屏现象，而且很诡异的是，这仅在iPhone X设备中发现。
截图详见我在小程序社区与github中提的issue。
原因1：当view组件包含多个子节点时，不能直接使用wx:for进行渲染，否则就会出现花屏或者重复渲染最后一条数据的问题。
原因2：当父节点有 flex-warp: wrap 与子节点 filter: drop-shadow(0rpx 0rpx 10rpx #c50000) 属性并存时，也会导致花屏。
将 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>
修改即可解决问题。
最后，嘻嘻！
标签：HTAP otto iphone x 父节点 top span head 它的 content
原文地址：https://www.cnblogs.com/Tylerrrkd/p/xcx_mass.html
