舟山闪爸电子技术有限公司

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

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

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

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

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

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

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

  wxml:

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

  說明:

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

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

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

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

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

  js:

  data: {

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

  defaultImg: "../../../assets/img/defaultImg.png", //默認(rèn)圖片

  },

  ......

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

  ......

  /**

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

  */

  errorFunction: function (e) {

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

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

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

  imgList[errorImgIndex] = this.data.defaultImg //錯誤圖片替換為默認(rèn)圖片

  this.setData({

  evaluteUserPic: evaluteUserPic

  })

  }

  }

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

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

有關(guān)進(jìn)一步了解小程序開發(fā)案例,請前往:http://www.fluoresville.cn/miniprogramdev/ 

【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿,由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記,如有知識產(chǎn)權(quán)人并不愿意我們使用,如果有侵權(quán)請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請您直接與該類商品/服務(wù)的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商,長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺、在線教育SaaS服務(wù)平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過技術(shù)創(chuàng)新,提供產(chǎn)品和服務(wù),助力企業(yè)向數(shù)字化轉(zhuǎn)型,通過科技驅(qū)動商業(yè)革新,讓商業(yè)變得更智慧!



▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多



熱門標(biāo)簽
SaaS
上/下篇
  • 小程序appid是干嘛的,有什么用

  • 小程序積分商城系統(tǒng)開發(fā)

換一換相關(guān)推薦
精選內(nèi)容
熱點(diǎn)精選