商城系統(tǒng) 注冊

小程序設(shè)置默認圖片、錯誤加載圖片

2020-09-27|HiShop
導讀:小程序設(shè)置默認圖片、錯誤加載圖片的實現(xiàn)效果...

  小程序設(shè)置默認圖片、錯誤加載圖片的實現(xiàn)效果:

小程序設(shè)置默認圖片、錯誤加載圖片

  小程序不支持h5中的onerrorimg,只開放了binderror屬性,當錯誤發(fā)生時,會發(fā)布到 AppService,事件對象event.detail = {errMsg: 'something wrong'}。

  網(wǎng)上查了下,沒有什么好的解決方法,找了幾個案例結(jié)果都沒有實現(xiàn)想要的效果。

  結(jié)合前邊看過的案例,大部分都是采用修改數(shù)據(jù)源將錯誤圖片替換為默認圖片的,但是有好多代碼都沒貼全,以致不好理解。

  下面就根據(jù)自己遇到的情況對圖片為空、圖片路徑錯誤的情況進行了處理,相關(guān)代碼如下,相關(guān)數(shù)據(jù)都有說明:

  wxml:

  小程序設(shè)置默認圖片、錯誤加載圖片

  說明:

  imgList: 圖片數(shù)據(jù)源列表,需要在data中定義初始數(shù)據(jù),或者從接口動態(tài)獲取數(shù)據(jù);

  errorFunction: 圖片加載錯誤綁定的事件,錯誤圖片替換為默認圖片主要在這里操作;

  data-errorimg: 錯誤圖片索引數(shù)據(jù),需要在errorFunction中用以記錄錯誤圖片對應的位置;

  如果圖片地址為空,是不會觸發(fā)binderror的,所以就直接對圖片地址做判斷,如果為空,則替換為默認圖片。

小程序設(shè)置默認圖片、錯誤加載圖片

  js:

  data: {

  imgList:"", //圖片列表,動態(tài)獲取

  defaultImg: "../../../assets/img/defaultImg.png", //默認圖片

  },

  ......

  省略圖片數(shù)據(jù)源獲取代碼

  ......

  /**

  * 圖片加載錯誤觸發(fā)的事件

  */

  errorFunction: function (e) {

  if(e.type=="error"){

  var errorImgIndex = e.target.dataset.errorimg //獲取錯誤圖片循環(huán)的下標

  var imgList= this.data.imgList        //將圖片列表數(shù)據(jù)綁定到變量

  imgList[errorImgIndex] = this.data.defaultImg //錯誤圖片替換為默認圖片

  this.setData({

  evaluteUserPic: evaluteUserPic

  })

  }

  }

  備注:使用這種方法,是需要將圖片數(shù)據(jù)源放在data中的,這樣才可以在 binderror 的事件中進行數(shù)據(jù)的替換,不可以直接在wxml中調(diào)用接口的數(shù)據(jù)。

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。

更多小程序開發(fā)案例,盡在:http://westcoastpropertyservices.com/xiaocx/kaifa.html 

電話咨詢 預約演示 0元開店