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;
			}
		}
	}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注