uniapp 轮播列表一排展示3个，左右滑动，滑动到中间放大

一、效果展示

二、代码实现

1.html代码：

	<!-- 轮播 -->
	<view class="heade">
		<swiper class="swiper" 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">
					<view class="swiper-item" :class="{current:index==currentIndex}">
						<text class="">轮播{{index}}--{{currentIndex}}</text>
						<view class=""><text>￥</text> 99.00</view>
						<view class="">详情信息1详情信息2详情信息3</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
	<!-- 轮播 -->

2.javascript代码

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

			}
		},
		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>

3.css代码

<style scoped>
	/* 轮播图 */
	.heade {
		height: 300rpx;
		position: relative;
		padding-top:100rpx;
	}

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

	.swiper {
		width: 100vw;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.current {
		transform: scale(1.15);
		position: absolute;
		background: #FFF7F0 !important;
		border: 2rpx solid #FFAA9A !important;
		top: 6rpx;
		left: 0rpx;
		right: 0rpx;
		z-index: 10;
		transition: all 0.2s ease-in 0s;
		border-radius: 16rpx;
	}

	uni-swiper-item {
		overflow: inherit;
	}

	.swiper-item {
		box-sizing: border-box;
		position: relative;
		background: #FCFCFF;
		border-radius: 16rpx;
		border: 2rpx solid #DFE4E9;
		padding: 16rpx;
		text-align: center;
		width: 212rpx;
	}
</style>

完成