微信小程序 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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
简单的分页代码js实现
May 17 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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解答方法
2012/02/04 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
jQuery把表单元素变为json对象
2013/11/06 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
jQuery事件对象总结
2016/10/17 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
pycharm快捷键汇总
2020/02/14 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
《秋思》教学反思
2016/02/23 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
Python MNIST手写体识别详解与试练
2021/11/07 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL