微信小程序 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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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函数实现分页含文本分页和数字分页
2014/10/23 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python抽取指定url页面的title方法
2018/05/11 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
初中美术教学反思
2014/01/29 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
需求分析说明书
2014/05/09 职场文书
社区平安建设方案
2014/05/25 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
工作失职检讨书500字
2014/10/17 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
mysql sql常用语句大全
2022/06/21 MySQL