uniapp的原生swiper标签实现卡片轮播图

开发过程中，可能会遇见这样的需求，卡片式轮播图（上方是图片，下方是文字描述，左右显示一部分）。

来看下效果图：

实现方式如下：

html部分:

<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" previous-margin="60rpx" next-margin="60rpx" @change="currentChange">
    <swiper-item v-for="(item,index) in userOutLookList" :key="index">
        <view class="main-card w95" :class="currentIndex == index ? 'current-card' : 'side-card'">
            <view class="local-pic flex-center-align">{{item.picUrl}}</view>
            <view class="swiper-item-info bold fz30 ml20 mt20">{{item.userInfo}}</view>
	        <view class="about-info fz26 c74 ml20 mt20">{{item.aboutInfo}}</view>
        </view>
	</swiper-item>
</swiper>

js部分:

<script>
	export default {
		data() {
			return {
				indicatorDots: true, // 是否显示面板指示点
				autoplay: false, // 是否自动切换
				interval: 2000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				userOutLookList: [{
					picUrl: '图片1',
					userInfo: '李女士 188****5757',
					aboutInfo: '用了他们家的软件感觉真的太好了，这钱花的太值了，可以现场就看到渲染图了。遇到不会的地方，联系他们家的客服，客服也会耐心地教我们，真的售后也太棒了。我们用的省心，我们的客户用的更加安心、放心！'
				}, {
					picUrl: '图片2',
					userInfo: '张女士 178****5453',
					aboutInfo: '用了他们家的软件感觉真的太好了，这钱花的太值了，可以现场就看到渲染图了。遇到不会的地方，联系他们家的客服，客服也会耐心地教我们，真的售后也太棒了。我们用的省心，我们的客户用的更加安心、放心！'
				}, {
					picUrl: '图片3',
					userInfo: '吴先生 133****6575',
					aboutInfo: '用了他们家的软件感觉真的太好了，这钱花的太值了，可以现场就看到渲染图了。遇到不会的地方，联系他们家的客服，客服也会耐心地教我们，真的售后也太棒了。我们用的省心，我们的客户用的更加安心、放心！'
				}],
				currentIndex: 0, // 当前小标
			}
		}
		methods: {
			// 轮播点击
			currentChange(e) {
				this.currentIndex = e.detail.current
			}
		}
	}
</script>

scss部分：

<style lang="scss" scoped>
     @import url('@/static/css/reset.css');
     .swiper {
	    height: 820rpx;

		.main-card {
			margin: 50rpx auto;
			border-radius: 30rpx;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			.local-pic {
				width: 100%;
				height: 390rpx;
				border-radius: 30rpx;
				background-color: #eb6966;
			}

			.about-info {
				line-height: 40rpx;
			}
		}

		.current-card {
			height: 700rpx;
			transition: all 0.6s;
		}

		.side-card {
			height: 640rpx;
			margin-top: 80rpx;
			transition: all 0.6s;
			}
		}
</style>

希望对大家有所帮助，有不对的对方还请见谅！