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>

渲染效果:

相关推荐
Mr.Jessy11 分钟前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
code_YuJun36 分钟前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我38 分钟前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
Elieal1 小时前
AJAX 知识
前端·ajax·okhttp
sulikey1 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
社会底层无业大学生1 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
烟袅2 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅2 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴2 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智2 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节