uniapp 商品列表 数据循环渲染
<view class="goods-cells clearfix">
<view class="col" v-for="item in lists" :key="item">
<view class="goods-box">
<view class="goods-pic"><image :src="item.pic" mode="widthFix"></image></view>
<view class="goods-grid">
<view class="title">{{item.title}}</view>
<view class="goods-foot">
<view class="v-price">¥24.60</view>
<view class="del-price">¥41.20</view>
<view class="v-tag">自营</view>
</view>
</view>
</view>
</view>
</view>
lists:[
{
title:'金枝玉叶多肉植物盆栽室内花卉观花阳台',
pic:"../../static/images/goods/pic1.jpg",
isflag:true,
},
{
title:'金枝玉叶多肉植物盆栽室内花卉观花阳台',
pic:"../../static/images/goods/pic2.jpg",
},
{
title:'金枝玉叶多肉植物盆栽室内花卉观花阳台',
pic:"../../static/images/goods/pic3.jpg",
}
,
{
title:'金枝玉叶多肉植物盆栽室内花卉观花阳台',
pic:"../../static/images/goods/pic1.jpg",
},
{
title:'金枝玉叶多肉植物盆栽室内花卉观花阳台',
pic:"../../static/images/goods/pic2.jpg",
},
{
title:'金枝玉叶多肉植物盆栽室内花卉观花阳台',
pic:"../../static/images/goods/pic3.jpg",
}
]
.goods-cells{
padding:10rpx;
.col{
float: left;
padding: 10rpx;
width: 50%;
}
}
.goods-box{
border-radius: 10rpx;
background-color: #fafafa;
overflow: hidden;
.goods-grid{
padding:20rpx 16rpx;
background-color: #fafafa;
.title{
font-size: 26rpx;
height: 80rpx;
line-height: 40rpx;
margin-bottom: 10rpx;
}
}
.goods-foot{
display: flex;
align-items: center;
.v-price{
font-size: 30rpx;
color: #ea0616;
font-weight: bold;
}
.del-price{
font-size: 24rpx;
color: #999;
text-decoration: line-through;
margin-left: 10rpx;
}
.v-tag{
margin-left: auto;
display: inline-flex;
align-items: center;
border-radius: 28rpx;
color: #ea0616;
font-size: 24rpx;
line-height: 1;
padding: 4rpx 8rpx;
border: 1px solid #ea0616;
}
}
.goods-pic{
font-size: 0;
image{
width: 344rpx;
height: 344rpx;
}
}
}