小程序-----圖片動態加載

<!-- 小程序前端的多圖加載 -->
<block wx:for="{{aboutImages}}" wx:key="image">
    <image src="{{item}}" data-id="{{index}}" mode="widthFix" style="width:{{imgwidth[index]}}" bindload="loadimage"></image>
</block>
<!-- 縮放    widthFix    寬度不變，高度自動變化，保持原圖寬高比不變 -->

 

<!-- 小程序js處理 -->
data:{
    imgwidth:[],            圖片尺寸集合
}

loadimage:function(e){
  var This = this;
  var id = e.target.dataset.id;     <!-- 獲取圖片加載的序號 -->
  var width = e.detail.width;       <!-- 獲取圖片加載的寬度 -->
  var height = e.detail.height;         <!-- 獲取圖片加載的高度 -->
  var res = wx.getSystemInfoSync();     <!-- 獲取系統信息(screenWidth--屏幕寬度)  -->
  var imgwidth = This.data.imgwidth;
  if (width < res.screenWidth){         <!-- 如果圖片的寬度小於屏幕的寬度，保持原圖片的寬度不變，將寬度傳入尺寸集合 -->
    imgwidth[id] = width + 'px';
    This.setData({
      imgwidth: imgwidth
    })  
  }else{                                <!-- 如果圖片的寬度大於等於屏幕的寬度，讓圖片的寬度變成100%(或者屏幕寬度)，將寬度傳入尺寸集合 -->    
    imgwidth[id] = '100%';
    This.setData({
      imgwidth: imgwidth
    })
  }
}