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

news/2024/2/29 3:48:45

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

<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来实现换行。然后,给每个图片项设置了宽度为两列的一半,并设置了图片间距。这样就可以实现两列排列的图片展示效果。

<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>


https://www.xjx100.cn/news/3118994.html

相关文章

Proteus的网络标号与总线

Proteus为了减少过多、复杂的连线&#xff0c;可以使用网络标号与总线配合使用。 Proteus的导线上添加了网络标号&#xff0c;意味着在Proteus上相同的网络标号是连在一起的&#xff0c;所说在图纸上看不出来。 如下图是比较好的Proteus中使用总线的绘制的图纸。可以效仿着画…

1091 Acute Stroke (三维搜索)

题目可能看起来很难的样子&#xff0c;但是看懂了其实挺简单的。&#xff08;众所周知&#xff0c;pat考察英文水平&#xff09; 题目意思大概是&#xff1a;给你一个L*M*N的01长方体&#xff0c;求全为1的连通块的总体积大小。&#xff08;连通块体积大于T才计算在内&#xf…

unity学习笔记12

一、物理系统 如何让一个球体受到重力的影响&#xff1f; 只要给物体添加刚体组件&#xff08;Rigidbody&#xff09;&#xff0c;就可以使其受到重力影响 1.刚体&#xff08;Rigidbody&#xff09;&#xff1a; 刚体是一个组件&#xff0c;用于使游戏对象受到物理引擎的控制。…

fasterxml 注解组装实体

使用 FasterXML Jackson 的注解 JsonTypeInfo 和 JsonSubTypes 可以实现多态类型的处理。在你的 User 类上&#xff0c;你可以添加这些注解来指示 Jackson 如何处理多态类型。 以下是使用 JsonTypeInfo 和 JsonSubTypes 注解的 User 类的修改&#xff1a; import com.fasterx…

小航助学题库蓝桥杯题库c++选拔赛(22年3月)(含题库教师学生账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09; 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;

nacos配置变更导致logback日志异常

问题背景: 线上的服务突然内存爆满&#xff0c;查服务器突然发现&#xff0c;日志全部打印到了/tmp/tomcat.xxx.port目录下&#xff0c;后来对应操作时间&#xff0c;和nacos修改配置是同一时间发生的&#xff0c;但是疑惑的点是&#xff0c;nacos配置变更为什么会引起logback的…

LeetCode:2336. 无限集中的最小数字(hash模拟 C++)

目录 2336. 无限集中的最小数字 题目描述&#xff1a; 实现代码与解析&#xff1a; set 原理思路&#xff1a; 优先级队列 2336. 无限集中的最小数字 题目描述&#xff1a; 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, ...] 。 实现 SmallestInfiniteSet 类&#xf…

用python求出1-100的和(6种方式)

求1到100数字的合计 #方法一 sum20 for i in range(1,101):sum2i print("---sum1---") print(sum2)#方法二 def fsum(n):s0for i in range(1,n1):siprint(s) print("----sum2----") fsum(100)#方法三while循环实现 def fsum1(n):i0 #初始化变量s0while i …