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

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

html 复制代码
<template>
  <view>
    <image v-for="(image, index) in imageList" :key="index" :src="image"></image>
  </view>
</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来实现换行。然后,给每个图片项设置了宽度为两列的一半,并设置了图片间距。这样就可以实现两列排列的图片展示效果。

html 复制代码
<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>
相关推荐
难以触及的高度12 分钟前
mysql中between and怎么用
数据库·mysql
吃杠碰小鸡14 分钟前
commitlint校验git提交信息
前端
Jacky(易小天)27 分钟前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
虾球xz1 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
Karoku0661 小时前
【企业级分布式系统】ELK优化
运维·服务器·数据库·elk·elasticsearch
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端