欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简单实现瀑布流

程序员文章站 2022-07-12 15:20:58
...

 view

<view class="list-view">
			<view class="m-view" v-for="(item,index) in listGoods" :key="item">
				<image class="g-img" src="../../static/temp/cate21.jpg" mode=""></image>
				<view class="m-title">
					ZL933袜子(男女款)5双/袋颜色随机
					3天发货
				</view>
				<view class="j-view">
					200 积分
				</view>
			</view>
		</view>

js

export default {
		data() {
			return {
				listGoods:[1,1,1,1,1,1,1,1,1,1]
			}
		},
		methods: {
			
		}
	}

css


	.list-view{
		width: 100%;
		background-color: #FFFFFF;
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.m-view{
		width: 346upx;
		height: 408upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		border:1upx solid rgba(216,216,216,1);
		margin-bottom: 20upx;
	}
	.m-view:nth-child(odd){
		margin-right: 20upx;
	}
	.g-img{
		width: 342upx;
		height: 262upx;
		border-radius:8upx 8upx 0upx 0upx;
	}
	
	.m-title{
		padding: 10upx;
		font-size:24upx;
		font-weight:500;
		color:rgba(78,78,78,1);
		line-height:32upx;
	}
	.j-view{
		padding: 10upx;
		font-size:26upx;
		font-weight:500;
		color:rgba(244,72,86,1);
		line-height:36upx;
	}

简单实现瀑布流,架子搭好,里面样式自己可以修改定义

简单实现瀑布流

 

相关标签: 瀑布流