微信小程序列表图片加载错误处理

在加载列表的时候，难免会出现部分图片地址错误或者各种原因导致图片加载失败，下面记录一下我遇到部分图片加载不出来的解决方法。我这里是加载错误的图片会设置成一张默认的本地图片

</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

})

}

最后上效果图，最下面就是加载失败的图片，已经被替换成我们准备好的加载失败专用图片。

微信小程序列表图片加载错误处理相关推荐

微信小程序调试器加载错误出现空白
打开微信小程序调试器的时候,调试器加载错误,这种情况把桌面任务栏的微信小程序取消固定就可以了
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序上拉加载流程
微信小程序上拉加载流程 1.首先需要在微信官方文档把scroll-view这个方法引入进来,然后使用这个方法,在样式里面写scroll-y,代表的是上下滑动,然后给滑动的盒子一个高度,100vh,然后 ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...

微信小程序列表图片加载错误处理

微信小程序列表图片加载错误处理相关推荐

最新文章

热门文章