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>

渲染效果:

相关推荐
二月垂耳兔798几秒前
jQueryHTML与插件
前端·jquery
quo-te24 分钟前
AJAX简介
前端·ajax·okhttp
bingbingyihao35 分钟前
通过代码获取接口文档工具
开发语言·前端·javascript
月伤5935 分钟前
JS中Map对象与数组的相互转换
前端·javascript·html
SEO_juper2 小时前
解密 URL 参数:如何利用它们提升网站性能和用户体验
前端·javascript·ux·seo·url·数字营销·谷歌seo
nuIl2 小时前
让 Cursor 帮你把想法落地
前端·ai编程
HyaCinth2 小时前
Taro 数字滚动组件
javascript·react.js·taro
不会叫的狼2 小时前
uni-app初学
uni-app
老李不敲代码2 小时前
榕壹云在线商城系统:基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案
mysql·微信小程序·小程序·uni-app·软件需求
去伪存真2 小时前
看我如何破解api接口文档定义空白, 还不想手动写接口TS类型定义的困局
前端·typescript