• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序 image组件binderror使用例子与js中的onerror区别

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

作者:无影飞絮剑 字体:[增加 减小] 来源:互联网 时间:2017-05-11

无影飞絮剑通过本文主要向大家介绍了image onerror,onerror,onerror事件,img onerror,window.onerror等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

微信小程序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'" />
</div>

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

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

.wxml文件

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

.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) //修改数据源对应的数据
 }
</div>

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-08-19js常用数组算法总结
  • 2017-05-11简单好用的nodejs 爬虫框架分享
  • 2018-01-28js运算符
  • 2017-05-11原生js实现回复评论功能
  • 2017-05-11jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
  • 2017-05-11Angular.js基础学习之初始化
  • 2017-05-11jquery广告无缝轮播实例
  • 2017-05-11JS实现iframe自适应高度的方法示例
  • 2017-05-11windows下vue-cli及webpack搭建安装环境
  • 2017-05-11javascript实现右下角广告框效果

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery广告无缝轮播实例
    • 纯js的右下角弹窗实例
    • js实现打地鼠小游戏
    • ES6中的箭头函数实例详解
    • Move.js入门
    • jquery事件与绑定事件
    • angularJS深拷贝详解
    • BootStrap+Mybatis框架下实现表单提交数据重复验证
    • Vue 进阶教程之v-model详解
    • jquery将标签元素的高设为屏幕的百分比

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有