uniapp 使用 flex布局将图片展示循环排列两列

本文介绍: 在下述代码中，我们给包含图片的容器设置了flex 布局，并通过设置flex–wrap 属性为wrap来实现换行。然后，给每个图片项设置了宽度为两列的一半，并设置了图片间距。这样就可以实现两列排列的图片展示效果。

将以下代码改成图片 展示 循环排列两列 展示

&lt;template&gt;
  &lt;view&gt;
    &lt;image v-for="(image, index) in imageList" :key="index" :src="image"&gt;</image&gt;
  </view&gt;
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]
    };
  }
};
</script>

解决：

在下述代码中，我们给包含图片的容器设置了flex 布局，并通过设置flex–wrap 属性为wrap来实现换行。然后，给每个图片项设置了宽度为两列的一半，并设置了图片间距。这样就可以实现两列排列的图片展示效果。

<template>
  <view class="image-container">
    <image v-for="(image, index) in imageList" :key="index" :src="image" class="image-item"></image>
  </view>
</template>

<style>
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20rpx;
  margin-left: 20px;
  margin-right: 20px;
}

.image-item {
  width: 48%; /* 设置图片宽度为两列的一半 */
  margin-bottom: 10px; /* 设置图片间距 */
}
</style>

<script>
export default {
  data() {
    return {
      imageList: [
        '/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
		'/static/test-image.jpg',
      ]
    };
  }
};
</script>