uniapp开发小程序，实现堆叠卡片轮播图

一、实现堆叠卡片轮播图:

需求:

1. 实现堆叠轮播图效果
2. 堆叠到后面的图片有虚化效果
3. 可以在堆叠图片上写文字或叠加图片等效果
4. 可以手动滑动，也可以定时自动轮播

二、代码实现：

1.封装一个组件myswiper.vue

<!-- 折叠轮播图 组件-->
<template>
	<view  class="swpbig">
		<view class="swiperPanel" ref="swiperPanel" @touchstart="startMove" @touchend="endMove">
			<view class="swiperItem" v-for="(item, index) in swiperList" :key="index" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
				<view class="children">
					<view class="pic">
						<image class="pici" :src="item.url"></image>
						<image  class="banner_signal" src="../../static/banner_signal.png" mode=""></image>
						<view class="swpnew">标题</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	var timer;
	export default {
		props: {
			swiperList: {
				type: Array,
				default: ()=>[
					{
						    type: 'Array',
							url: '../../static/ceshi1.png',
						}, {
							type: 'Array',
							url: '../../static/ceshi2.png',
						}, {
							type: 'Array',
							url: '../../static/ceshi3.png',
						}
				]
				}
		},
		data() {
			return {
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: []
			};
		},
		created() {
			var macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			// 计算swiper样式
			this.swiperList.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
			timer = setInterval(()=>{
				this.rightSlider();
			},3000)
		},
		methods: {
			rightSlider(){
				var newList = JSON.parse(JSON.stringify(this.itemStyle));
				var last = [newList.pop()]
				newList = last.concat(newList)
				this.itemStyle = newList;
			},
			getStyle(e) {
				if (e > this.swiperList.length / 2) {
					var right = this.swiperList.length - e
					return {
						transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
						zIndex: 9999 - right,
						opacity: 0.5 / right
					}
				} else {
					return {
						transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
						zIndex: 9999 - e,
						opacity: 0.5 / e
					}
				}
			},
			startMove(e) {
				clearInterval(timer);
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				timer = setInterval(()=>{
					this.rightSlider();
				},3000)
				var newList = JSON.parse(JSON.stringify(this.itemStyle));
				if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
					// 向左滑动
					var last = [newList.pop()]
					newList = last.concat(newList)
				} else {
					// 向右滑动
					newList.push(newList[0])
					newList.splice(0, 1)
				}
				this.itemStyle = newList
			}
		}
	}
</script>
 
<style lang="scss">
	.swpbig{
		overflow: hidden;
		
	}
	.swiperPanel {
		margin-top: 200upx;
		height: 680upx;
		width: 686upx;
		overflow: hidden;
		position: relative;
		margin-left:80upx;
 
		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0upx;
			transition: all .5s;
 
			.children {
				// height: 100%;
				width: 570upx;
				margin: 2upx 160upx 2upx 0;
				position: relative;
				
				.pic {
					position: relative;
					height: 645rpx;
					width: 560rpx;
					border-radius: 10upx;
				}
				.pici{
				    position: absolute;
				    height: 645rpx;
				    width: 560rpx;
				    border-radius: 10upx;	
				}
				.banner_signal{
					position: absolute;
					height: 645rpx;
					width: 560rpx;
					top: 0;
				}
				.swpnew{
					position: absolute;
					height: 63rpx;
					font-size: 45rpx;
					font-weight: bold;
					color: #FFF;
					line-height: 53rpx;
					right: 28rpx;
					margin-top: 12rpx;
					letter-spacing: 5rpx;
				}
			}
		}
	}
</style>
 

2.在需要的页面引用

<template>
	<view class="">
		<mySwiper :swiperList='swiperList'></mySwiper >
	</view>
</template>

<script>
	// 组件导入
	import mySwiper from '../../components/myswiper.vue'
	export default {
		// 组件注册
		components: {
			blackSwiper
		},

		data() {
			return {
				//组件数据处理：
				swiperList: [{
					type: 'Array',
					url: "https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280",
				}, {
					type: 'Array',
					url: 'https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000',
				}, {
					type: 'Array',
					url: 'https://inews.gtimg.com/om_bt/OuevRi3lDJoCccAqM17UARGbNlk9CRf3pGPv7He7zA8yYAA/1000',
				}]
			};
		},

	}
</script>

完成~