微信小程序图片自适应实现解析

page({
  data:{
    list_1: [{ url: '../../img/1.jpg' }, { url: '../../img/2.jpg' }, { url: '../../img/3.jpg' }, { url: '../../img/4.jpg' }],
    imgmsg:{}
  }
})

//显示图片自适应
 imageLoad(e) {
  //获取小程序节点属性的api
  const query = wx.createSelectorQuery()
  var imgw = e.detail.width, //图片原始宽度
   imgh = e.detail.height, //图片原始高度
   index = e.currentTarget.dataset.i, //图片下标
   ratio = imgw / imgh, //图片宽高比
   image = this.data.imgmsg, //图片宽高的索引对象
   that = this,
   viewW = null,//容器宽度
   viewH = null;//容器高度
  query.select('.top_img').boundingClientRect(function(res) {
   viewW = res.width; 
   viewH = res.height;
   //由于图片的大小不一定,可能宽高都会超出整个图片容器,因此这里多用了图片本身的宽高进行的判断
   if (imgw > imgh || imgw > viewW) { //当图片自身的宽大于图片自身的高，将图片的宽等于容器的宽，去计算图片的高
    imgw = viewW;
    imgh = imgw / ratio;
   } else if (imgw  viewH) { //当图片自身的宽小于图片自身的高，将图片的高等于容器的高，去计算容器的宽
    imgw = viewH * ratio;
    imgh = viewH;
   }
   //把图片计算后的宽高属性根据下标存入到对象中，并使用math的floor方法取整
   image[index] = {
    width: Math.floor(imgw),
    height: Math.floor(imgh)
   }
   //更新视图
   that.setData({
    imgmsg: image
   })
  })
  query.exec()
 },