uniapp使用多列布局显示图片,一行两列

完整代码:

html 复制代码
<script setup>
	const src = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
</script>

<template>
	<view class="content">
		<view class="img-list">
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
		</view>
	</view>
</template>



<style scoped>
	.content {
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img-list {
		padding: 10rpx;
		column-count: 2;
		column-gap: 10rpx;
	}
</style>

渲染效果:

相关推荐
Tachyon.xue2 小时前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
细节控菜鸡2 小时前
【2025最新】ArcGIS for JS二维底图与三维地图的切换
javascript·arcgis
FuckPatience3 小时前
Vue 中‘$‘符号含义
前端·javascript·vue.js
东风西巷5 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪6 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友8 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API9 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx9 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶10 小时前
webpack学习
前端·学习·webpack
excel10 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端