微信小程序列表图片加载错误处理
在加载列表的时候,难免会出现部分图片地址错误或者各种原因导致图片加载失败,下面记录一下我遇到部分图片加载不出来的解决方法。我这里是加载错误的图片会设置成一张默认的本地图片
<view class="itemList" wx:for="{{reportList}}" data-name="{{reportList[index].GEOID}}" wx:key="{{index}}" bindtap="navigateToPage">
<image class="iconStyle" mode="aspectFill" src='{{item.PICTURENAME==""?defaultImg:item.PICTURENAME}}' binderror="errorFunction" data-errorimg="{{index}}"></image>
<view class="itemContentStyle">
<text class="itemNumberStyle.text_ellipsis">{{item.YWBH}}\n</text>
<view class="sideView">
<view class="tag_text.text_ellipsis"> {{item.XSHJ}}</view>
<text class="itemAddressStyle.text_ellipsis.right_p">{{item.DJSJ}}</text>
</view>
<text class="taskAddressStyle.text_ellipsis">{{item.JTDZ}}</text>
</view>
</view>
下面是服务器返回的数据
{"pageNumber":1,"pageSize":10,"total":2,"rows":[{"YWBH":"WFXS20200703240517070","GEOID":"6ce2c084-a662-4c0f-818f-cb93f317212d","JTDZ":"湖北省武汉市*****派出所附近","XSLY":"微信举报","XZQDM":"210112018009","CLZT":"4","DJSJ":"2020-07-03 17:17:07","XSHJ":"分办","PICTURENAME":"http://*********"},{"YWBH":"WFXS20200424240527240","GEOID":"425a85cc-ba94-4aad-8c54-bc60e9fc246b","JTDZ":"湖北省****公园附近","XSLY":"微信举报","XZQDM":"210112018009","CLZT":"4","DJSJ":"2020-04-24 17:27:24","XSHJ":"分办","PICTURENAME":"http://*********"}]}
这是后台返回的数据,我稍做了修改,PICTURENAME里面就是我们要取的图片url.
下面来处理加载失败的图片,在<image>中我们可以看到有这样一行代码:binderror="errorFunction",errorFunction就是用来处理图片加载失败的时候的处理逻辑。通过var errorImgIndex = e.target.dataset.errorimg可以拿到错误图片的下标,我们将列表的原始数据datas绑定到imgList,然后通过imgList[errorImgIndex].PICTURENAME = this.data.defaultImg将错误的图片替换为本地的默认图片,最后把修改好的imgList数据重新赋值给列表数据datas
errorFunction: function (e) {
if (e.type == "error") {
var errorImgIndex = e.target.dataset.errorimg //获取错误图片循环的下标
var imgList = this.data.datas //将图片列表数据绑定到变量
imgList[errorImgIndex].PICTURENAME = this.data.defaultImg //错误图片替换为默认图片
this.setData({
datas: imgList
})
}
},
最后上效果图,最下面就是加载失败的图片,已经被替换成我们准备好的加载失败专用图片。