1.创Hot.vue文件,引入index.vue
2.对Hot.vue进行编辑
注意,components中记得加上Commodity
摘一下之前用过的代码:
{
id:1,
imgUrl:"../../static/img/commodity1.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:2,
imgUrl:"../../static/img/commodity1.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:3,
imgUrl:"../../static/img/commodity1.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
}
3.放图片到static/img中
最后Hot.vue中代码:
<template>
<view class='hot'>
<Commodity :dataList='hotList'></Commodity>
</view>
</template>
<script>
import Commodity from'../common/Commodity.vue'
export default{
data(){
return{
hotList: [
{
id:1,
imgUrl:"../../static/img/hot1.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:2,
imgUrl:"../../static/img/hot2.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:3,
imgUrl:"../../static/img/hot3.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
}
]
}
},
components:{
Commodity
}
}
</script>
<style>
</style>
Commodity.vue中代码:
<template>
<view class='commodity'>
<!-- 单个商品组件 -->
<view class='commodity-item'
v-for="(item,index) in dataList"
:key='index'
:style="'width:'+itemW+';'"
>
<image
class='commodity-img'
:src="item.imgUrl"
mode=""
:style="'height:'+bigH+';'"
></image>
<view class='commodity-content'>
<text class='commodity-name'>{{item.name}}</text>
<view>
<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,
itemW:{
type:String,
default:"375rpx"
},
bigH:{
type:String,
default:"375rpx"
}
}
}
</script>
<style scoped>
.commodity{
display: flex;
flex-wrap: wrap;
}
.commodity-item{
padding-bottom:20rpx;
}
.commodity-img{
width:100%;
}
.commodity-content{
text-align: center;
}
.commodity-name{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
color:#333333;
word-break: break-all;
padding:6rpx 20rpx;
}
.oprice{
text-decoration: line-through;
font-size:24rpx;
color:#999999;
}
.discount{
border-radius: 4rpx;
border:1px solid #FF3333;
padding:2rpx 10rpx;
font-size:20rpx;
color:#FF3333;
}
</style>
CommodityList.vue的完整代码:
<template>
<view class='commodity-list'>
<!-- 商品列表组件 -->
<Commodity :dataList='commodityList'></Commodity>
</view>
</template>
<script>
import Commodity from './Commodity.vue'
export default {
data () {
return {
commodityList:[
{
id:1,
imgUrl:"../../static/img/commodity1.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:2,
imgUrl:"../../static/img/commodity2.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:3,
imgUrl:"../../static/img/commodity3.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:4,
imgUrl:"../../static/img/commodity4.jpg",
name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
pprice:"299",
oprice:"659",
discount:"5.2"
}
]
}
},
components:{
Commodity
}
}
</script>
<style>
</style>
以上操作完成后的结果运行为一排两个(750/2),接下来要让它一排三个(750/3=250)
在Hot.vue中传一下值
再在Commodity.vue中绑定
然后运行,就变成一排三个
但高度有点怪,编写高度:
之前的一排三个,是在Commodity中编写了itemW,且在commodity-item中添加了:style="'width:'+itemW+';'"
itemW:{
type:String;
default: "375rpx"
}
如法炮制高度,bigH添加在Commodity.vue的<script>中
bigH:{
type:String,
default:"375rpx"
}
再把bigH赋值传入Hot.vue中
看看运行结果: