小程式圖片自適應寫法
阿新 • • 發佈:2018-11-14
方法一:
在image上加上mode=”widthFix”給定寬度,高度就會相對應等比顯示了
方法二:
程式碼如下:
1、html程式碼
<image src='{{BaseURL}}/uploadFile/backstage/{{item.PictureFileName}}' bindload="imageLoad" data-index="{{ index }}" style="width:{{ images[index].width-10 }}rpx; height:{{ images[index].height }}rpx;" bindtap='imageDetail' data-url='{{BaseURL}}uploadFile/backstage/{{item.PictureFileName}}'></image>
2、js程式碼
Page({ data: { images:{} }, imageLoad: function(e) { var $width=e.detail.width, //獲取圖片真實寬度 $height=e.detail.height, ratio=$width/$height; //圖片的真實寬高比例 var viewWidth=718, //設定圖片顯示寬度,左右留有16rpx邊距 viewHeight=718/ratio; //計算的高度值 var image=this.data.images; //將圖片的datadata-index作為image物件的key,然後儲存圖片的寬高值 image[e.target.dataset.index]={ width:viewWidth, height:viewHeight } this.setData({ images:image }) } })
實現效果圖: