uniapp swiper间距轮播 | swiper改写结合animation实现间距轮播

实现方法基本思路：

一、首先正常使用swiper组件

二、使用swiper组件的autoplay、circular、previous-margin、next-margin、display-multiple-items等属性实现普通间距轮播

三、将swiper的change、current属性与uni.createAnimation这个API相结合，实现中间高两边低的间距轮播效果

效果图
普通轮播：	中间高两边低的间距轮播：

 

中间高两边低的间距轮播代码：

<template>
	<view class="wrapper">
		<view class="bg-change-box">
			<image class="full-bg-img" :src="imgUrls[current]" mode=""></image>
		</view>
		<view class="main-content">
			<view class='test'>
				<swiper display-multiple-items='1' circular='true' previous-margin='50px' next-margin='50px' autoplay
					@change='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>
			</view>

			<view style="height: 60vh;" class="">
               其他要添加的内容
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation: {},
				type: "bottom",
				title: '首页',
				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: {
			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">
	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}


	.wrapper {
		position: relative;

		.bg-change-box {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;

			.full-bg-img {
				width: 100%;
				height: 100vh;
			}
		}

	}



	.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 {
				width: 85%;
				height: 500rpx;
				display: inline-block;
				box-sizing: border-box;
				position: relative;
				top: 49%;
				transform: translateY(-45%);
				border-radius: 30rpx;
			}
		}
	}
</style>

普通间距轮播：只需要去除代码中swiper的@change和current属性，对应的方法代码直接删除即可。

结尾：打开官网，可以看到单位设置可以是多样的，可以直接按需设置

官网链接：

swiper | uni-app官网

uni.createAnimation(OBJECT) | uni-app官网

该文章参考：【小程序】小程序swiper组件实现间距轮播_uniapp swiper间距轮播_Y__Cheng的博客-CSDN博客

该文章仅作为个人笔记记录，如有其他版权问题，请及时联系文主删除