免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具,讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌,搶占AI流量入口!  點擊查看

小程序模板網(wǎng)

微信小程序開發(fā)——設(shè)置默認圖片、錯誤加載圖片

發(fā)布時間:2018-05-07 14:53 所屬欄目:小程序開發(fā)教程

小程序不支持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:

 

				
  1. <image src='{{imgList[index]==""?defaultImg:imgList[index]}}' binderror="errorFunction" data-errorimg="{{index}}" />

說明:       imgList: 圖片數(shù)據(jù)源列表,需要在data中定義初始數(shù)據(jù),或者從接口動態(tài)獲取數(shù)據(jù);  errorFunction: 圖片加載錯誤綁定的事件,錯誤圖片替換為默認圖片主要在這里操作;  data-errorimg: 錯誤圖片索引數(shù)據(jù),需要在errorFunction中用以記錄錯誤圖片對應(yīng)的位置;  如果圖片地址為空,是不會觸發(fā)binderror的,所以就直接對圖片地址做判斷,如果為空,則替換為默認圖片。

 

js:

 

				
  1. data: {
  2. imgList:"", //圖片列表,動態(tài)獲取
  3. defaultImg: "../../../assets/img/defaultImg.png", //默認圖片
  4. },
  5. ......
  6. 省略圖片數(shù)據(jù)源獲取代碼
  7. ......
  8. /**
  9. * 圖片加載錯誤觸發(fā)的事件
  10. */
  11. errorFunction: function (e) {
  12. if(e.type=="error"){
  13. var errorImgIndex = e.target.dataset.errorimg //獲取錯誤圖片循環(huán)的下標
  14. var imgList= this.data.imgList        //將圖片列表數(shù)據(jù)綁定到變量
  15. imgList[errorImgIndex] = this.data.defaultImg //錯誤圖片替換為默認圖片
  16. this.setData({
  17. evaluteUserPic: evaluteUserPic
  18. })
  19. }
  20. }

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://m.szcjxy.com/wxmini/doc/course/24283.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢: 點擊咨詢
在線客服