简单实现瀑布流
程序员文章站
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;
}
简单实现瀑布流,架子搭好,里面样式自己可以修改定义
上一篇: uniapp的tabBar组件
下一篇: uniapp 以css方式实现瀑布流