您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“微信小程序開發設置默認圖片、錯誤加載圖片的方法”,內容詳細,步驟清晰,細節處理妥當,希望這篇“微信小程序開發設置默認圖片、錯誤加載圖片的方法”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
<image src='{{imgList[index]==""?defaultImg:imgList[index]}}' binderror="errorFunction" data-errorimg="{{index}}" />
說明:
imgList: 圖片數據源列表,需要在data中定義初始數據,或者從接口動態獲取數據;
errorFunction: 圖片加載錯誤綁定的事件,錯誤圖片替換為默認圖片主要在這里操作;
data-errorimg: 錯誤圖片索引數據,需要在errorFunction中用以記錄錯誤圖片對應的位置;
如果圖片地址為空,是不會觸發binderror的,所以就直接對圖片地址做判斷,如果為空,則替換為默認圖片。
data: {imgList:"", //圖片列表,動態獲取defaultImg: "../../../assets/img/defaultImg.png", //默認圖片},......省略圖片數據源獲取代碼....../*** 圖片加載錯誤觸發的事件*/errorFunction: function (e) {if(e.type=="error"){var errorImgIndex = e.target.dataset.errorimg //獲取錯誤圖片循環的下標var imgList= this.data.imgList //將圖片列表數據綁定到變量imgList[errorImgIndex] = this.data.defaultImg //錯誤圖片替換為默認圖片this.setData({evaluteUserPic: evaluteUserPic})}}
備注:使用這種方法,是需要將圖片數據源放在data中的,這樣才可以在 binderror 的事件中進行數據的替換,不可以直接在wxml中調用接口的數據。
讀到這里,這篇“微信小程序開發設置默認圖片、錯誤加載圖片的方法”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。