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

Posted 2021-01-11 Tylerrrkd

问题概览：

小程序用 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写个脚本。

 

最后，嘻嘻！