uniapp 轮播列表左右滑动，滑动到中间放大

嘿，小苹果2023-09-19 23:51

html

javascript 复制代码

	<!-- 轮播 -->
					<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="u-f-s-26 weight-500 u-color-1D1">初级会员{{index}}--{{currentIndex}}</text>
										<view class="u-color-FE6 weight-600 u-f-s-40 u-m-t-16"><text class="u-f-s-24 weight-400">￥</text> 99.00</view>
										<view class="u-color-646 u-f-s-20 u-m-t-16">有效期30天</view>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
					<!-- 轮播 -->

javascript

javascript 复制代码

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

css

javascript 复制代码

/* 轮播图 */
	.heade {
			height: 300rpx;
			position: relative;
		}
	 
		.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: 24rpx;
			text-align: center;
		}