微信小程序动态给image加宽高

image.png

具体mode里写什么，还需要根据自己的真实情况来写，第一次我的写法是这个样子的

<view wx:for="{{imgList}}" wx:key="index  wx:for-item="itemName"" class="big">
  <image src="{{itemName}}" class='img' mode="widthFix" ></image>  
</view>

.big{margin-left:30rpx;margin-right:30rpx;}
.img{width:100%}

这种确实适用好多情况，但是不适用于我的项目啊（我的图片小的时候，你100%严重拉伸图片）
所有我只能动态给image设置宽高
需要考虑px与rpx的转换

image.png

<view wx:for="{{imgList}}" wx:key="index  wx:for-item="itemName"" class="big">
  <image src="{{itemName}}" class='img' data-id="{{index}}" bindload="imageLoad" style="width:{{images[index][0]}};height:{{images[index][1]}}" ></image>  
</view>

data:{
  ...
  images:[]
},
imageLoad:function(e){
  var _this=this;
    var $width=e.detail.width,    //获取图片真实宽度
        $height=e.detail.height,  //获取图片真实高度
        $id = e.currentTarget.dataset.id; //获取第几个图片
    var bi = ($width/$height).toFixed(2);//记录一下宽高比
        wx.getSystemInfo({
          success:function(res){
            var screen = res.windowWidth; //获取当前设备的宽度
            var keshi = (screen - (60 / (750 / screen))).toFixed(2); //根据1px=？rpx来算一下图片除去左右margin的值为图片的可视值
            if($width>keshi){//图片宽度大于可视的宽度时，把图片的宽度设为可视的值，高度根据宽高比计算得出
              $width = keshi+'px';
              $height = (keshi / bi).toFixed(2)+'px';
            }else{//图片宽度小于等于可视宽度为图片本身的宽高
              $width = $width+'px';
              $height = $height+'px';
            }
          }
        })
    var images = new Array();
    images[$id] = [$width,$height];   //把宽高弄成数组
    _this.setData({
      //images:_this.data.images.concat(images) //加给变量修改成下面的
      images:Object.assign(_this.data.images,images)
    })
},
onLoad:function(){
//页面加载时重新给变量赋值防止在原来的基础上增加数组
  this.setData({
    images:[]
})
}

END