微信小程序中image組件binderror使用例子與js中的onerror區(qū)別是什么

這篇文章將為大家詳細講解有關微信小程序中image組件binderror使用例子與js中的onerror區(qū)別是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

微信小程序image組件binderror使用例子(對應html、js中的onerror)

　　　　官方文檔

在微信小程序開發(fā)中，我們使用列表包含圖片，如果這個圖片鏈接404錯誤，那么我們應該給它提供一個默認的友好URL地址。html和js中使用onerror事件就可以了

<img src="image.gif" onerror="this.src='https:w.chesudi.com/Public/web/img/onerrorcar.png'" />

微信小程序image組件沒提供onerror事件，提供了一個binderror事件來代替。

如果圖片鏈接404，就會觸發(fā)這個binderror事件，我們在綁定的事件里修改對應的數(shù)據(jù)源就好了，如下

.wxml文件

<image class="carlist_img" src="{{item.img}}" binderror="binderrorimg" data-errorimg="{{index}}"></image>

.js文件　

 binderrorimg:function(e){ 
  var errorImgIndex= e.target.dataset.errorimg //獲取循環(huán)的下標
  var imgObject="carlistData["+errorImgIndex+"].img" //carlistData為數(shù)據(jù)源，對象數(shù)組
  var errorImg={}
  errorImg[imgObject]="https://cache.yisu.com/upload/information/20200622/114/77161.png" //我們構(gòu)建一個對象
  this.setData(errorImg) //修改數(shù)據(jù)源對應的數(shù)據(jù)
 }

 易錯點：this.setData({"carlistData["+errorImgIndex+"].img"：對象})類似這樣的就不正確了

關于“微信小程序中image組件binderror使用例子與js中的onerror區(qū)別是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。