uniapp首页商品轮播（一排显示三个）

功能：首页一排显示三个商品并自动播放中间有放大效果

通过uniapp的内置组件swiper 加上css控制样式达到效果

 

该方法是通过查找他人资料改成适合自己需求的代码 （直接上代码）

<template>
	<view class="bg">
		
		<view class="title">更多 <text class="cuIcon-right"></text>
		</view>

		<view class="pin">

			<view class="heade">
				<swiper class="swiper" autoplay="true" display-multiple-items='3' circular='true' previous-margin='1rpx'
					next-margin='1rpx' current='0' @change="swiperChange">
					<block v-for="(item,index) in list" :key='index'>
						<swiper-item class="sitem" style="z-index: 2; " >
							<view class="swiper-item" :class="{current:index==currentIndex}">
								<view class="img">
									<image style="width: 190rpx;height: 190rpx;border: 15rpx;"
										:src="item.img" mode=""></image>
								</view>
								<view class="name">标题</view>
								<view class="price" style="width: 190rpx;text-overflow: ellipsis;overflow: hidden;">
									<text style=""><text class="biao">￥</text> <text
											style="font-size: 26rpx;">0.01起</text> </text>
									<text class="shan">￥19.9</text>
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>

		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				currentIndex: 1,
				list: [],
				list:[
					{
					img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4b934ec7d5cb0bc2f8a8e5a028bb8e8a?rik=U6gnLKWpMi%2f8kg&riu=http%3a%2f%2fimgcdn.dameigong.cn%2f20200506%2f20200506144621_37834_thumb.jpg&ehk=FAyfWxN4WlWtI9fE9v0yoqMpn1D5JKl5iDbx3WgezKs%3d&risl=&pid=ImgRaw&r=0'	
					},
					{
						img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4b934ec7d5cb0bc2f8a8e5a028bb8e8a?rik=U6gnLKWpMi%2f8kg&riu=http%3a%2f%2fimgcdn.dameigong.cn%2f20200506%2f20200506144621_37834_thumb.jpg&ehk=FAyfWxN4WlWtI9fE9v0yoqMpn1D5JKl5iDbx3WgezKs%3d&risl=&pid=ImgRaw&r=0'
					},
					{
						img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4b934ec7d5cb0bc2f8a8e5a028bb8e8a?rik=U6gnLKWpMi%2f8kg&riu=http%3a%2f%2fimgcdn.dameigong.cn%2f20200506%2f20200506144621_37834_thumb.jpg&ehk=FAyfWxN4WlWtI9fE9v0yoqMpn1D5JKl5iDbx3WgezKs%3d&risl=&pid=ImgRaw&r=0'
					},
					{
						img: 'https://ts1.cn.mm.bing.net/th/id/R-C.ea214c6bd697f499d917f86c9de53c56?rik=o33lqLaAKmrxMg&riu=http%3a%2f%2fp7.zbjimg.com%2fservice%2f2015-11%2f30%2fservice%2f565c164e15dd2.jpg&ehk=mVqsmAQPLS2fy1gbdfiML24rLDEbVL7KSW53DDhI%2bVI%3d&risl=&pid=ImgRaw&r=0'
					}
				]

			};
		},
		onLoad() {
			
		},
		methods: {
			swiperChange(event) {
				let a = 1;
				if (event.detail.current == (Number(this.list.length) - 1)) {
					// 滑动到最后一个时，  currentIndex 和 数组的下标 index 相等
					a = -(Number(this.list.length) - 1)
				}
				this.currentIndex = event.detail.current + a;
			}
		},
	}
</script>

<style lang="scss">
	/* 轮播图 */
	.heade {
		height: 450rpx;
		position: relative;
		top: 60rpx;
	}

	.sitem {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper {
		position: absolute;
		bottom: 0;
		left: 0rpx;
		width: 700rpx;
		height: 100%;
		z-index: 2;
		top: -45rpx;
	}

	.current {
		transform: scale(1.15);
		position: absolute;
		top: 6rpx;
		left: -5rpx;
		right: 0rpx;
		z-index: 10;
		transition: all 0.2s ease-in 0s;
		border-radius: 16rpx;
	}

	uni-swiper-item {
		overflow: inherit;
	}

	.swiper-item {

		padding: 10rpx;
		box-sizing: border-box;
		position: relative;
		background: #FCFCFF;
		border-radius: 16rpx;
		border: 2rpx solid #DFE4E9;
		// padding: 24rpx;
		text-align: center;
		z-index: 2;

		.img {
			width: 190rpx;
			height: 190rpx;
		}

		.name {
			height: 40rpx;
			line-height: 40rpx;
			width: 180rpx;
			color: #1C1C1C;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 24rpx;
			text-align: left;
		}

		.price {
			text-align: left;
			height: 40rpx;
			line-height: 40rpx;
			color: #fd080a;

			.biao {
				font-size: 12rpx;
			}

			.shan {
				color: #eee;
				text-decoration: line-through;
				color: #a5a5a5;
				text-decoration: line-through;
				font-size: 24rpx;
			}

		}
	}




	.bg {
		// padding: 20rpx;
		margin: 0 30rpx;
		position: relative;
		// background-color: #ffefe2;
		background: linear-gradient(180deg, #FFE6E2 0%, #FFFFFF 100%);

		overflow: hidden;


		.title {
			text-align: right;
			position: absolute;
			right: 20rpx;
			z-index: 99;
			top: 20rpx;
		}

		.pin {
			display: flex;
			justify-content: space-between;
			border-radius: 10rpx;
			height: 422rpx;
			// background-color: pink;
			// overflow-y: auto;

			.pinfan {
				margin-right: 20rpx;
				padding: 10rpx;
				background-color: #fff;


			}
		}
	}

	.pins {
		width: 100%;
		// height: 165rpx;
		height: 100%;
		position: absolute;
		z-index: 1;
		top: -10rpx;
	}
</style>