推荐:
- 顶部滑动导航
- swiper
- 推荐商品
- 卡片
- 商品列表 (猜你喜欢的 )
- 名称: CommodityList
- 封装: 是
- 调用公共的 CommodityList组件 (CommodityList 要调用 Commodity)
商品列表和单个商品组件封装
CommodityList组件
<template>
<view class="commodity-list">
<!-- 商品列表组件 -->
<!-- 向子组件发送数据 dateList 是参数名称 commodityList 为数据 -->
<Commodity :dataList='commdityList'></Commodity>
</view>
</template>
<script>
import Commodity from './Commodity.vue'
export default {
data(){
return{
commdityList:[
{
id:1,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:2,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},{
id:3,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:4,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},
]
}
},
components:{
Commodity
}
}
</script>
<style>
</style>
Commodity组件
<template>
<view class="commodity">
<!-- 单个商品组件 -->
<view class="commodity-item"
v-for="(item,index) in dataList"
:key="index"
>
<image class="commodity-img" :src="item.imgUrl" mode=""></image>
<view class="commodity-content">
<text class="commodity-name">{{item.name}}</text>
<view class="">
<text class="pprice">${{item.pprice}}</text>
<text class="oprice">${{item.oprice}}</text>
</view>
<text class="discount">{{item.discount}}折</text>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
dataList:Array
}
}
</script>
<style lang="scss">
.commodity{
display: flex;
flex-wrap: wrap;
}
.commodity-item{
width: 375rpx;
padding-bottom: 20rpx;
}
.commodity-img{
width: 100%;
height: 375rpx;
}
.commodity-content{
text-align: center;
}
.commodity-name{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
color: #333;
word-break: break-all;
padding: 6rpx 20rpx;
}
.oprice{
text-decoration: line-through;
font-size: 24rpx;
color: #999;
}
.discount{
border-radius: 4rpx;
border: 1px solid #FF3333;
padding: 2rpx 10rpx;
font-size: 20rpx;
color: #FF3333;
}
</style>
首页
<template>
<view class="content">
<view class="index">
<IndexSwiper></IndexSwiper>
<Recommend></Recommend>
<Card cardTitle='猜你喜欢'></Card>
<CommodityList></CommodityList>
<Card cardTitle='商品店铺'></Card>
<Card cardTitle='运动户外'></Card>
</view>
<view class="f-active-color">
文字
</view>
<view class="iconfont icon-xiaoxi"></view>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
import IndexSwiper from '@/components/index/indexSwiper.vue';
import Recommend from '@/components/index/Recommend.vue';
import Card from '@/components/common/Card.vue';
import CommodityList from '@/components/common/CommodityList.vue';
export default {
data() {
return {
title: 'Hello'
}
},
components:{
IndexSwiper,
Recommend,
Card,
CommodityList
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
实例图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ad96c1edbaea8323429bf799f278adaf.png)