微信小程序image组件binderror使用实例js中onerror的差异剖析

why 476 2024-08-15

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下

微信小程序image组件binderror使用实例与js中onerror的差异剖析

微信小程序image组件binderror使用例子(对应html、js中的onerror)

 binderrorHandleEvent当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}

在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址。html和js中使用onerror事件就可以了


1

<img  src="image.gif" onerror="this.src=&#39;https:w.chesudi.com/Public/web/img/onerrorcar.png&#39;" / alt="微信小程序 image组件binderror使用例子与js中onerror的区别分析" >


微信小程序image组件没提供onerror事件,提供了一个binderror事件来代替。

如果图片链接404,就会触发这个binderror事件,我们在绑定的事件里修改对应的数据源就好了,如下

.wxml文件


1

<image class="carlist_img" src="{{item.img}}" binderror="binderrorimg" data-errorimg="{{index}}"></image>


.js文件 


1

2

3

4

5

6

7

binderrorimg:function(e){

 var errorImgIndex= e.target.dataset.errorimg //获取循环的下标

 var imgObject="carlistData["+errorImgIndex+"].img" //carlistData为数据源,对象数组

 var errorImg={}

 errorImg[imgObject]="https://w.chesudi.com/Public/web/img/onerrorcar.png" //我们构建一个对象

 this.setData(errorImg) //修改数据源对应的数据

}


 易错点:this.setData({"carlistData["+errorImgIndex+"].img":对象})类似这样的就不正确了

以上就是本文的全部内容,希望对大家的学习有所帮助。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中图片宽度自适应的有效实现途径
下一篇:怎么开发设计小程序-从零开始创建自己的小程序
相关文章

 发表评论

暂时没有评论,来抢沙发吧~