【首页】推荐店铺模块开发和滑块处理

一、【首页】推荐店铺模块开发和滑块处理

1.1 完成后的效果图：

1.2 components/index目录下新建Shop.vue组件

1.3 pages/index/index.vue引入Shop.vue组件

1.4 Shop.vue组件分为：上大图，下滑块的内容布局，滑块采用uni-app提供组件scroll-view。（scroll-view需要给父元素加入width:100%;white-space: no-wrap;其内容需要加入样式display: inline-block;）

1.5 滑块内容调用了单个商品组件，其中改变了是否换行以及文字大小，Shop.vue具体代码如下：

<template>
	<view class='shop'>
		<view class='shop-item'>
			<view class='shop-big'>
				<image class='shop-big' src="../../static/image/shop.jpg" mode=""></image>
			</view>
			<!--<image class='shop-big' src="../../static/image/shop.jpg" mode=""></image>-->
			<scroll-view scroll-x="true" class='scroll-content' >
				<view class='scroll-item'>
					<commodity :datalist="shoplist" wrap="no-wrap" itemW="200rpx" bigH="200rpx" namesize="20rpx"></commodity>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import commodity from '../common/commodity.vue'
	export default{
		data () {
			return{
				shoplist:[
					{
						id:1,
						imUrl:"../../static/image/shop1.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					},
					{
						id:2,
						imUrl:"../../static/image/shop2.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					},
					{
						id:3,
						imUrl:"../../static/image/shop3.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					},
					{
						id:4,
						imUrl:"../../static/image/shop4.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					}
				]
			}
		},
		components:{
			commodity
		}
	}
</script>

<style scoped>
	.shop-big{
		width: 100%;
		height: 350rpx;
	}
	.scroll-content{
		width: 100%;
		white-space: nowrap;
	}
	.scroll-item{
		display: inline-block;
	}
</style>

加上这段<view></view>运行出的结果不会产生空白

1.6在商品组件（commodity.vue）中将换行（wrap）和文字大小（namesize）变为可调整

1.7commodity.vue具体代码如下：

<template>
	<view class='commodity' :style="'flex-wrap:'+wrap+';'">
		<!--单个商品组件-->
		<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' :style="'font-size:'+namesize+';'">{{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"
			},
			//是否换行
			wrap:{
				type:String,
				default:"wrap"
			},
			//商品文字大小
			namesize:{
				type:String,
				default:"26rpx"
			}
		}
	}
</script>

<style scoped>
	.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: black;
		word-break: break-all;
		padding: 6rpx 20rpx;
	}
	.oprice{
		text-decoration: line-through;
		font-size: 24rpx;
		color: #999999;
	}
	.discount{
		border-radius: 4rpx;
		border: 1px solid #ff0000;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		color: #ff0000;
	}
</style>