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>

渲染效果:

相关推荐
liuyang___24 分钟前
第一次经历项目上线
前端·typescript
西哥写代码1 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
清风细雨_林木木1 小时前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
FungLeo1 小时前
node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示
前端·非对称加密·rsa 加密·node 后端
雪芽蓝域zzs1 小时前
JavaScript splice() 方法
开发语言·javascript·ecmascript
不灭锦鲤1 小时前
xss-labs靶场第11-14关基础详解
前端·xss
不是吧这都有重名2 小时前
利用systemd启动部署在服务器上的web应用
运维·服务器·前端
霸王蟹2 小时前
React中巧妙使用异步组件Suspense优化页面性能。
前端·笔记·学习·react.js·前端框架
Maỿbe2 小时前
利用html制作简历网页和求职信息网页
前端·html
森叶2 小时前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron