uniapp小程序系列-09首页一行三个商品开发

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中

看看运行结果: