微信小程序 image组件binderror使用例子与js中的onerror区别
作者:无影飞絮剑 时间:2024-04-19 09:42:56
微信小程序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":对象})类似这样的就不正确了
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
来源:http://www.cnblogs.com/itslives-com/p/binderror.html
标签:微信小程序,image组件,binderror
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
在python中logger setlevel没有生效的解决
2021-12-13 16:03:01
![](https://img.aspxhome.com/file/2023/7/135377_0s.jpg)
在OneProxy的基础上实行MySQL读写分离与负载均衡
2024-01-12 22:54:28
![](https://img.aspxhome.com/file/2023/6/119746_0s.jpg)
Python趣味实例,实现一个简单的抽奖刮刮卡
2023-07-20 18:59:41
![](https://img.aspxhome.com/file/2023/1/71401_0s.jpg)
jQuery实现用户注册的表单验证示例
2024-04-10 10:36:12
Python 使用csv库处理CSV文件的方法
2023-03-16 21:37:24
![](https://img.aspxhome.com/file/2023/9/65529_0s.png)
TensorFlow利用saver保存和提取参数的实例
2022-03-31 16:27:15
![](https://img.aspxhome.com/file/2023/6/70826_0s.jpg)
Python实现图片与视频互转代码实战(亲测有效)
2021-05-30 17:21:03
![](https://img.aspxhome.com/file/2023/6/118526_0s.jpg)
基于Python2、Python3中reload()的不同用法介绍
2023-10-01 17:59:15
el-input无法输入的问题和表单验证失败问题解决
2024-04-09 10:48:37
![](https://img.aspxhome.com/file/2023/7/139737_0s.png)
Python爬虫学习之获取指定网页源码
2023-11-06 02:29:15
![](https://img.aspxhome.com/file/2023/1/135451_0s.jpg)
网页设计中HTML常范的五个错误
2008-04-22 18:14:00
python 识别图片中的文字信息方法
2022-06-06 15:32:05
![](https://img.aspxhome.com/file/2023/6/65066_0s.jpg)
python计算圆周长、面积、球体体积并画出圆
2022-08-15 06:19:59
![](https://img.aspxhome.com/file/2023/6/135126_0s.jpg)
Python使用Flask框架同时上传多个文件的方法
2023-02-02 10:16:49
详解MySQL 数据库范式
2024-01-24 08:05:25
![](https://img.aspxhome.com/file/2023/7/119747_0s.png)
i++循环与i-–循环的执行效率(递增与递减效率)
2023-05-28 03:07:40
Go语言之嵌入类型详解
2024-02-05 08:39:16
![](https://img.aspxhome.com/file/2023/2/109692_0s.png)
超简单的Python HTTP服务
2023-01-22 06:19:15
Python实现圣诞树的多种方法
2023-07-27 01:02:20
![](https://img.aspxhome.com/file/2023/7/61477_0s.jpg)
python3实现带多张图片、附件的邮件发送
2023-05-11 06:51:10