E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实例:image组件的binderror事件处理

E企盈直播平台营销卖货系统

微信公众平台关于image组件的讲解都挺详细的,至于在binderror错误事件处理上并没有详细说明。那么如果我们在获取网络图片出现404 nofound的情况下要怎么处理呢?如果是单张和循环内的某张图片出错的情况下又该如何处理呢?      首先,我们都知道html的img组件自带一个onerror图片出错事件处理机制,写法就如同js一样。语法如下:img src=”xxx” οnerrοr=”this.src=’./img/default.png'”/      但是,我尝试在小程序里的image组件也做这样的处理,却发现并不能实现,反而要提示APP-SERVICE-Engine错误信息。后来重新翻看文档,找到类似的事件处理binderror,文档支出可以通过event.detail打印出具体的出错信息,并没有给出出错后的具体解决方案。通过和前辈沟通得到的解决方案如下:    通过dataset属性将image组件的src变量值存入。binderror事件通过获取属性变量值改变data的数据。当然这个有个弊端,就是image组件的src是动态的值而不能是直接指向某张图片的情况下。      那么具体处理代码如下:demo.wxml::单张图片:image src=”{{testImg}}” binderror=”errImg” bindload=”loadImg” data-err-img=”testImg” /多张图片的情况:      view class=”bd-left-item” wx:for=”{{classicArr}}”        image src=”{{item.img}}” class=”item-img” binderror=”errImg” data-err-img=”classicArr[{{index}}].img” /        view class=”bd-left-item-bottom”          view class=”title”{{item.title}}/view          view class=”addr”{{item.addr}}/view          view class=”tag” wx:for-items=”{{item.tags}}” wx:for-item=”tag”{{tag}}/view        /view      /viewdemo.js::Page( {  data: {    classicArr: [      {        img: “../../img/01.png”,        title: “现实世界的桃花源”,        addr: “福建省南安市东田镇香草世界”,        tags: [“摄影”, “PS”]      },      {        img: “../../img/default.png”,        title: “南普陀”,        addr: “福建省厦门市南普陀”,        tags: [“摄影1”, “PS”]      },      {        img: “../../img/default.png”,        title: “武夷山”,        addr: “福建省….”,        tags: [“摄影”, “PS2”]      }    ],    testImg: “../img/01.png”  },  errImg: function(e){    var _errImg=e.target.dataset.errImg;    var _objImg=”‘”+_errImg+”‘”;    var _errObj={};    _errObj[_errImg]=”../../img/01.png”;    console.log( e.detail.errMsg+”—-“+ _errObj[_errImg] + “—-” +_objImg );    this.setData(_errObj);//注意这里的赋值方式…  }});演示如下::去掉dataset属性,展示的是一片空白加入dataset属性后,结合binderror事件处理图片      但是这样存在一个情况就是每个页面都写这个程序不是很臃肿,那么我们考虑怎么把他写入到模块js文件里面呢?     解决方案::先把this对象传入到js函数里面,就可以直接修改外面的data数据了。具体函数如下:commons.js:://远程图片no found情况下指引function errImgFun(e, that){  var _errImg=e.target.dataset.errImg;  var _errObj={};  _errObj[_errImg]=”../../img/01.png”;  console.log( e.detail.errMsg+”—-” + “—-” +_errImg );  that.setData(_errObj);  }module.exports = {  sayHello: sayHello,  errImgFun: errImgFun}index.js::var comm=require(‘../../common/common.js’);Page({  errImg: function(ev){    //需要访问当前页面的数据对象传递到其它页面上    var _that=this;    comm.errImgFun(ev, _that);  },})    以上是个人对于binderror事件的使用,至于bindload还是不清楚要怎么使用,有知道的希望告知下~~

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实例:image组件的binderror事件处理
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏