E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序踩坑记之——花屏/重复渲染数据
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏