1. 程式人生 > >小程式圖片自適應寫法

小程式圖片自適應寫法

方法一:

在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
      })
  }
})

實現效果圖: