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>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

完成~