微信小程序 image组件binderror使用例子与js中的onerror区别


Posted in Javascript onFebruary 15, 2017

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

官方文档

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

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

<img src="image.gif" onerror="this.src='https:w.chesudi.com/Public/web/img/onerrorcar.png'" />

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

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

.wxml文件

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

.js文件 

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":对象})类似这样的就不正确了

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
js自带函数备忘 数组
Dec 29 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
Canvas实现放射线动画效果
Feb 15 #Javascript
微信小程序 开发经验整理
Feb 15 #Javascript
bootstrap table操作技巧分享
Feb 15 #Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
JS原型与原型链的深入理解
Feb 15 #Javascript
js中数组插入、删除元素操作的方法
Feb 15 #Javascript
jQuery中on方法使用注意事项详解
Feb 15 #Javascript
You might like
php建立Ftp连接的方法
2015/03/07 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Django Highcharts制作图表
2016/08/27 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
在python中实现对list求和及求积
2018/11/14 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
python3代码中实现加法重载的实例
2020/12/03 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
中文系学生自荐信范文
2013/11/13 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
升学宴主持词
2014/04/02 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript