微信小程序-swiper样式1-间距轮播

<template>
	<swiper display-multiple-items='1' circular='true' autoplay
	previous-margin='50px' next-margin='50px' 
	@animationfinish='change' :current='current'>
	<block v-for="(item,i) in imgUrls" :key='i'>
		<swiper-item>
			<view class="box" :animation="i == current ? animationData:animationData2">
				<image :src='item'></image>
			</view>
		</swiper-item>
	</block>
	</swiper>
</template>
 
<script>
	export default {
		data() {
			return {
				animation: {},
				imgUrls: [
					'../../static/pic(1).jpg',
					'../../static/pic(2).jpg',
					'../../static/pic(3).jpg'
				],
				current: 0,
				animationData: {},
				animationData2: {},
				communityWorks: [
					1, 2, 3, 4, 5, 6
				],
			}
		},
		onShow() {},
		onLoad() {
			this.stretch("580rpx")
			this.shrink("520rpx")
		},
		onHide() {
			this.close()
			uni.showTabBar()
		},
		onUnload() {
			this.close()
			uni.showTabBar()
		},
		methods: {
			// 防止出现轮播图卡死现象最好使用bindanimationfinish方法切换当前下标的图片
			change(e) {
				this.current = e.detail.current
				this.stretch("580rpx")
 
				this.shrink("520rpx")
			},
			// 收缩
			stretch(h) {
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				this.animation = animation
				animation.height(h).step()
				this.animationData = animation.export()
			},
			// 展开
			shrink(h) {
				var animation2 = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				this.animation2 = animation2
				animation2.height(h).step()
				this.animationData2 = animation2.export()
 
			},
 
		}
 
	}
</script>
 
<style lang="scss">
	.main-content {
		width: 100%;
		background-color: rgba(0, 0, 0, .8);
 
 
		.test {
			width: 100%;
			height: 640rpx;
			box-sizing: border-box;
 
			swiper {
				height: 100%;
			}
 
 
			swiper-item {
				text-align: center;
				border-radius: 30rpx;
 
				image {
					border-radius: 30rpx;
					width: 100%;
					height: 100%;
				}
			}
 
 
			.box {
				margin:0 4px;
				height: 500rpx;
				display: inline-block;
				box-sizing: border-box;
				position: relative;
				top: 49%;
				transform: translateY(-45%);
				border-radius: 30rpx;
			}
		}
	}
</style>

1