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

<block wx:for="{{list_1}}" wx:key="{{index}}">
  <view class="top_img" style="width:{{imgmsg">
      <image style="width:{{imgmsg[index].width}}px !important;height:{{imgmsg[index].height}}px !important;" 
      src="/UploadFiles/2021-04-02/{{item.url}}">

2、在js中定义模拟数据，并定义image属性空对象，用该对象通过key值放入相对应下标的图片宽高属性


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


3、添加imageLoad方法去进行图片大小的计算，这里我们可以通过wx.createSelectorQuery()方法去获取图片容器的宽高，通过事件对象可以获取图片原始宽高，具体方法如下


//显示图片自适应
 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 < imgh || imgh > viewH) { //当图片自身的宽小于图片自身的高，将图片的高等于容器的高，去计算容器的宽
    imgw = viewH * ratio;
    imgh = viewH;
   }
   //把图片计算后的宽高属性根据下标存入到对象中，并使用math的floor方法取整
   image[index] = {
    width: Math.floor(imgw),
    height: Math.floor(imgh)
   }
   //更新视图
   that.setData({
    imgmsg: image
   })
  })
  query.exec()
 },


好了，到这里，我们可以看下具体的结果了



简单的列表图片自适应功能实现了，但是这个方法还能进行扩展和优化，如果有好的想法可以一起学习交流，共同提高
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。