taimed/pages/articleList/PrecisionImageGrid.vue

<template>
    <view class="penBoxListImages com_Img_box">
<!-- tupian我设置的是数字暂无后端数据做循环啊，可替换为数组的长度 -->
    <block v-for="(item, index) in imageList" wx:key="index">
         <image :class="`img_list 
         ${imageList.length == 1 ? 'com_Img_box_images1':''}
         ${imageList.length == 2 ? 'com_Img_box_images2':''}
         ${imageList.length == 3 ? 'com_Img_box_images3':''}
         ${imageList.length == 4 ? 'com_Img_box_images4':''}
         ${imageList.length == 5 ? 'com_Img_box_images5':''}
         ${imageList.length == 6 ? 'com_Img_box_images6':''}
         ${imageList.length == 7 ? 'com_Img_box_images7':''}
         ${imageList.length == 8 ? 'com_Img_box_images8':''}
         ${imageList.length == 9 ? 'com_Img_box_images9':''}`" 
                  :src="item" mode="aspectFill" />
    </block>
</view>
  </template>
  
  <script>
  export default {
    props: {
      // 图片地址列表
      imageList: {
        type: Array,
        required: true,
        default: () => []
      },
      // 网格间距（rpx）
      gap: {
        type: Number,
        default: 10
      },
      // 容器宽度占父元素比例
      containerRatio: {
        type: Number,
        default: 1 // 100%宽度
      }
    },
    methods: {
      // 根据索引和总数计算每个图片的样式
      getItemStyle(index, total) {
        // 计算基础尺寸和间隙
        const containerWidth = `calc(100% * ${this.containerRatio})`;
        let width, height, gridTemplateColumns;
        
        // 根据图片数量设置不同排列规则
        switch(total) {
          case 1:
            // 1张图：占满容器
            width = '100%';
            height = '400rpx';
            break;
          case 2:
            // 2张图：并排
            width = `calc(50% - ${this.gap/2}rpx)`;
            height = '250rpx';
            break;
          case 3:
            // 3张图：1行2张，1行1张
            if (index === 0) {
              width = '100%';
              height = '250rpx';
            } else {
              width = `calc(50% - ${this.gap/2}rpx)`;
              height = '150rpx';
            }
            break;
          case 4:
            // 4张图：2x2网格
            width = `calc(50% - ${this.gap/2}rpx)`;
            height = '200rpx';
            break;
          default:
            // 5张及以上：3列网格
            width = `calc(33.333% - ${this.gap*2/3}rpx)`;
            height = '180rpx';
        }
        
        return {
          width,
          height,
          // 处理右边距（最后一列不加右边距）
          marginRight: this.shouldAddMarginRight(index, total) ? `${this.gap}rpx` : '0',
          // 处理下边距（最后一行不加下边距）
          marginBottom: this.shouldAddMarginBottom(index, total) ? `${this.gap}rpx` : '0'
        };
      },
      
      // 判断是否需要添加右边距
      shouldAddMarginRight(index, total) {
        if (total <= 2) return index === 0;
        if (total === 3) return index === 1;
        if (total === 4) return index % 2 === 0;
        return (index + 1) % 3 !== 0; // 3列布局最后一列不加右边距
      },
      
      // 判断是否需要添加下边距
      shouldAddMarginBottom(index, total) {
        if (total <= 3) return index < total - 2;
        if (total === 4) return index < 2;
        // 3列布局最后一行不加下边距
        const rows = Math.ceil(total / 3);
        const currentRow = Math.floor(index / 3) + 1;
        return currentRow < rows;
      },
      
      // 预览图片
      previewImage(index) {
        uni.previewImage({
          current: index,
          urls: this.imageList,
          loop: true
        });
      }
    }
  }
  </script>
  
  <style scoped>
.com_Img_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.com_Img_box_images1:nth-child(1) {
  width: 100%;
  height: 100%;
}
.com_Img_box_images2 {
  width: 49%;
  height: 100%;
}
.com_Img_box_images2:nth-child(n) {
  width: 49%;
  height: 100%;
}
 
.com_Img_box_images3 {
  width: 49%;
  height: 100%;
}
.com_Img_box_images3:nth-child(2){
  width: 49%;
  height: 49%;
}
.com_Img_box_images3:nth-child(3) {
  width: 49%;
  height: 49%;
  position: absolute;
  bottom: 0;
  right: 0;
}
 
.com_Img_box_images4 {
  width: 49%;
  height: 49%;
}
.com_Img_box_images5 {
  width: 69%;
  height: 69%;
}
.com_Img_box_images5:nth-child(2) {
  width: 28%;
  height: 69%;
}
.com_Img_box_images5:nth-child(n+3):nth-child(-n+5) {
  width: 32%;
  height: 29%;
}
.com_Img_box_images6 {
  width: 69%;
  height: 69%;
}
.com_Img_box_images6:nth-child(2) {
  width: 29%;
  height: 34%;
}
.com_Img_box_images6:nth-child(3) {
  width: 29%;
  height: 34%;
  position: absolute;
  bottom: 29%;
  right: 0;
}
.com_Img_box_images6:nth-child(n+4):nth-child(-n+5) {
  width: 34%;
  height: 29%;
}
.com_Img_box_images6:nth-child(6) {
  width: 29%;
  height: 29%;
}
.com_Img_box_images7 {
  width: 32%;
  height: 69%;
}
.com_Img_box_images7:nth-child(3) {
  width: 32%;
  height: 34%;
}
.com_Img_box_images7:nth-child(4) {
  width: 32%;
  height: 34%;
  position: absolute;
  bottom: 29%;
  right: 0;
}
.com_Img_box_images7:nth-child(n+5):nth-child(-n+7) {
  width: 32%;
  height: 29%;
}
.com_Img_box_images8 {
  width: 32%;
  height: 69%;
}
.com_Img_box_images8:nth-child(n+2):nth-child(-n+3) {
  width: 32%;
  height: 34%;
}
.com_Img_box_images8:nth-child(4) {
  width: 32%;
  height: 34%;
  position: absolute;
  right:33%;
  bottom: 29%;
}
.com_Img_box_images8:nth-child(5) {
  width: 32%;
  height: 34%;
  position: absolute;
  right:0;
  bottom: 29%;
}
.com_Img_box_images8:nth-child(n+6):nth-child(-n+8) {
  width: 32%;
  height: 29%;
}
.com_Img_box_images9 {
  width: 32%;
  height: 32%;
}
  </style>