小程序不支持h5中的onerrorimg,只開放了binderror屬性,當錯誤發生時,會發布到 AppService,事件對象event.detail = {errMsg: 'something wrong'}。 網上查了下,沒有什么好的解決方法,找了幾個案例結果都沒有實現想要的效果。 結合前邊看過的案例,大部分都是采用修改數據源將錯誤圖片替換為默認圖片的,但是有好多代碼都沒貼全,以致不好理解。 下面就根據自己遇到的情況對圖片為空、圖片路徑錯誤的情況進行了處理,相關代碼如下,相關數據都有說明: wxml:
說明: imgList: 圖片數據源列表,需要在data中定義初始數據,或者從接口動態獲取數據; errorFunction: 圖片加載錯誤綁定的事件,錯誤圖片替換為默認圖片主要在這里操作; data-errorimg: 錯誤圖片索引數據,需要在errorFunction中用以記錄錯誤圖片對應的位置; 如果圖片地址為空,是不會觸發binderror的,所以就直接對圖片地址做判斷,如果為空,則替換為默認圖片。 js:
備注:使用這種方法,是需要將圖片數據源放在data中的,這樣才可以在 binderror 的事件中進行數據的替換,不可以直接在wxml中調用接口的數據。 |