uniapp 瀑布流布局

最新推荐文章于 2024-09-03 12:42:04 发布

那就随缘吧skr

最新推荐文章于 2024-09-03 12:42:04 发布

阅读量475

点赞数

分类专栏：笔记文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/weixin_46210850/article/details/126933225

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<template>
	<view class="container">
		<view class="list">
			<view class="list-item" v-for="item in imageArr">
				<image class="item-img" :src="item.image" mode="widthFix" @tap="previewImage(item.image)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageArr: [{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/2021/12/5e8ba1ccdf0d4b8c96af595310a759a8.png',
					},
					{
						image: 'https://vehicle-library.oss-cn-beijing.aliyuncs.com/evaluation/image/53eaa68f843f418c82aceda375f659c0.png',
					},
				],
			}
		},
	}
</script>

<style>
	.container {
		overflow-y: scroll;
	}

	.list {
		padding-top: 4rpx;
		column-count: 2;
		column-gap: 18rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.list-item {
		width: 326rpx;
		background: white;
		border-radius: 14rpx;
	}

	.item-img {
		width: 100%;
		border-radius: 14rpx;
	}
</style>