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>
相关推荐
逐·風1 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
师太,答应老衲吧2 小时前
SQL实战训练之,力扣:2020. 无流量的帐户数(递归)
数据库·sql·leetcode
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
Channing Lewis3 小时前
salesforce case可以新建一个roll up 字段,统计出这个case下的email数量吗
数据库·salesforce
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
ketil274 小时前
Redis - String 字符串
数据库·redis·缓存
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript