uniapp 轮播滚动变大效果

觉得不够丝滑可以自己添加 transition 属性做过渡效果

// dom
<view class="header-banner-container">
	<swiper class="header-swiper" autoplay circular :interval="3000" :duration="500" :current="current"
				@change="swiperChange" :display-multiple-items="3" previous-margin='36px' next-margin="36px">
		<swiper-item v-for="(item, index) in list" :key="index">
			<view class="header-swiper-item-box">
					<view :class="{ 'header-swiper-item-select': currentCompute(current, index) }" class="header-swiper-item">
					<image class="header-layout-info-img" :src="item.url" />
				</view>
			</view>
		</swiper-item>
	</swiper>
</view>




<script lang="ts" setup>

 let list =[]

// 这个是计算展示的方法
const currentCompute = (current: number, index: number) => {
	if ((index - 1) === -1 && current === list.value.length - 1) {
		return list.value.length - 1
	} else {
		return current === (index - 1)
	}
}

</script>

.header-swiper-item-box {
	height: 258rpx;
	width: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	.header-swiper-item {
		height: 216rpx;
		width: 150rpx;
		background-image: 背景图;
		background-size: 100% 100%;

	}

	.header-swiper-item-select {
		height: 258rpx;
		width: 200rpx;
		background-image: 背景图;
		background-size: 100% 100%;
	}

	.header-layout-info-img {
		height: 77%;
		width: 100%;
	}
}