小程序的image标签有几个常用的属性,lazy-load(懒加载,默认为fasle,不过和本文无关),bindload(当图片加载完成的时候触发的事件),另一个就是我们本文的主角binderror(当发生错误的时候触发的事件);
有些列表中的图片是空的,我们需要对他进行处理,也就是替换一张默认图片,具体替换方法如下:
wxml:
<view wx:for="{{firstList}}" wx:key="index" data-id="{{item.id}}" bindtap="intoDetail" class='recordItem'>
<view class="pic">
<--data-img就是图片加载失败的时候加载的默认图片;binderror就是图片加载失败触发的事件-->
<image src="{{item.img_url==''?'../../img/public/default.png':item.img_url}}" data-index='{{index}}' data-img='../../img/public/default.png' binderror='errDetails'></image>
</view>
</view>
js:
// 图片加载错误的时候触发; 把当前的错误图片替换成默认图片;
errDetails(e) {
var firstList = this.data.firstList;
var default_img = e.currentTarget.dataset.img;
var index = e.currentTarget.dataset.index;
firstList[index].img_url = default_img;
this.setData({
firstList
})
},