微信小程序 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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
微信小程序实现电子签名并导出图片
May 27 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
列表内容的选择
2006/06/30 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
初中生自我评价
2014/02/01 职场文书
技校毕业生自荐信
2014/06/03 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
安全教育培训制度
2015/08/06 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Python中文纠错的简单实现
2021/07/07 Python
Python中如何处理常见报错
2022/01/18 Python