微信小程序设置图片加载不出来解决方案

因为公司项目的需求,最近在做微信小程序。公司项目是一个购物类的APP,在调试项目的时候遇到一个奇怪的问题:在商品的分类列表中,如果库存为0的商品,商品是有一个"已售罄"的logo的。点击商品列表页进入商品详情页,在商品详情页也会有一个"已售罄"的logo。


商品列表页
商品详情页

然而如果在商品列表页执行频繁点击列表条目操作,频繁进入商品详情页,这时发现商品详情页的"已售罄"logo时而时而没有。打开小程序的调试按钮,可以查看图片的url并不为空。

已售罄图片链接地址不为空


查看代码,后来把“已售罄”logo 显示隐藏的判断条件换成 hidden 才算解决问题!

用 hidden 这个判断条件才算解决问题

查看官方文档,

wx:ifvshidden

因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的,如果在初始渲染条件为false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近小程序被炒的火热。很多人应该已经尝试了微信小程序,我也抱着学习的态度,准备研究一下。研究之后感觉还可以,如果有...
    范小饭_阅读 8,114评论 0 13
  • 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了...
    Mr大大大阅读 47,359评论 9 68
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,682评论 1 92
  • 最近做了一个投票的微信小程序,开发过程主要还是参考官方文档:https://mp.weixin.qq.com/de...
    june5253阅读 22,125评论 1 11
  • 丹阳world阅读 1,339评论 0 2