卡片层叠Banner

水一个uni的卡片层叠Banner

<template>
	<view :style="{ height: height+'px' }" class="box">
		<view class="swiper-container">
			<view class="swiper-item" v-for="(item, index) in list" :key="index" @tap="imageTap(index)"
				@touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove"
				:style="{transform: styleList[index].transform, zIndex: styleList[index].zIndex, opacity: styleList[index].opacity,display:styleList[index].display}">
				<view class="wrap">
					<image class="image" :src="item" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 图片url列表
			 */
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				/**
				 * 开始触摸点坐标
				 */
				start: {
					x: 0,
					y: 0
				},
				current: 0,
				/**
				 * 每个item样式列表
				 */
				styleList: [],
				height: 0,
				width: 0,
				styleTop: {
					transform: 'scale(1) translate(0%,0px)',
					zIndex: 5,
					filter: `blur(${0==0?0:5}px)`, //滤镜
					display: "block"
				},
				styleSec: {
					transform: 'scale(0.8) translate(14%,0px)',
					zIndex: 4,
					filter: `blur(${1==0?0:5}px)`, //滤镜
					display: "block"
				},
				styleThird: {
					transform: 'scale(0.7) translate(26%,0px)',
					zIndex: 3,
					filter: `blur(${2==0?0:5}px)`, //滤镜
					display: "block"
				}
			};
		},
		watch: {
			list(old, newd) {
				console.log('fpbd', 'update', newd)
				this.setupStyleList(newd)
			}
		},
		created() {
			this.setupStyleList(this.list)
		},
		mounted() { //防止页面翻页抖动
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.swiper-item').boundingClientRect(data => {
					console.log('abc', data)
					this.height = data.height
					this.width = data.width
				}).exec();
			}, 1500)
		},
		methods: {
			setupStyleList(newd) {
				let styleList = []
				if (newd.length > 0) {
					styleList.push(this.styleTop)
				}

				if (newd.length > 1) {
					styleList.push(this.styleSec)
				}

				if (newd.length > 2) {
					for (let i = 2; i < newd.length; i++) {
						styleList.push(this.styleThird)
					}
				}
				this.styleList = styleList
			},
			imageTap(item) {
				// 图片的点击事件
				this.$emit('imageTap', item)
			},
			/**
			 * 触摸开始
			 * @param {Object} e
			 */
			touchStart(e) {
				this.start.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.start.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			/**
			 * 触摸结束
			 * @param {Object} e
			 */
			touchEnd(e) {
				let newStyleList = []
				for (let i = 0; i < this.list.length; i++) {
					newStyleList.push(this.styleThird)
				}
				let tx = e.changedTouches[0].pageX - this.start.x
				let ty = e.changedTouches[0].pageY - this.start.y
				let idx = 0

				if (Math.abs(tx) > Math.abs(ty)) {
					//左右方向滑动
					if (tx < 0) {
						// 向左滑动
						this.current++;
						if (this.current > this.styleList.length - 1) {
							this.current = 0
						}
					} else if (tx > 0) {
						// 向右滑动
						this.current--;
						if (this.current < 0) {
							this.current = this.styleList.length - 1
						}
					}
				} else {
					//这里就不处理上下方向的事件了，有此需求的同仁可以在这里写逻辑
					//上下方向滑动
					if (ty < 0) {
						// 向上滑动
					} else if (ty > 0) {
						// 向下滑动
					}
				}
				let indexInfo = this.calculateStyleIndexInfo()
				newStyleList[indexInfo.topIndex] = this.styleTop
				newStyleList[indexInfo.secIndex] = this.styleSec
				newStyleList[indexInfo.thirdIndex] = this.styleThird

				this.styleList = newStyleList
			},
			/**
			 * 当前item点击返回索引下标
			 * @param {Object} idx
			 */
			touchMove(event) {
				let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
				var newStyleList = JSON.parse(JSON.stringify(this.styleList))
				let tx = touch.clientX - this.start.x
				let ty = touch.clientY - this.start.y
				let percentX = Math.max(tx / (this.width), -1)
				percentX = Math.min(percentX, 1)

				let indexInfo = this.calculateStyleIndexInfo()
				newStyleList[indexInfo.topIndex].transform =
					'scale(1) translate(' + tx.toFixed(0) + 'px,0px)'
				newStyleList[indexInfo.secIndex].transform = 'scale(' + 0.8 - 0.2 * percentX + ') translate(' + (14 *
					percentX).toFixed(
					0) + '%,0px)'
				newStyleList[indexInfo.thirdIndex].transform = 'scale(' + 0.7 - 0.1 * percentX + ') translate(' + (14 *
						percentX)
					.toFixed(
						0) + '%,0px)'
				this.styleList = newStyleList
			},
			calculateStyleIndexInfo() {
				let next = this.current
				let next2 = next >= this.list.length - 1 ? 0 : next + 1
				let next3 = next2 >= this.list.length - 1 ? 0 : next2 + 1
				return {
					topIndex: next,
					secIndex: next2,
					thirdIndex: next3
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		.swiper-container {
			box-sizing: border-box;
			width: 100%;
			position: relative;

			.swiper-item {
				width: 100%;

				position: absolute;
				top: 0;
				left: 0;
				transition: all .5s;

				.wrap {
					padding: 2rpx 44rpx;

					.image {
						width: 100%;
						height: 200rpx;
						border-radius: 20upx;
					}
				}
			}
		}
	}
</style>

使用方法

<card-swiper :list="imageUrlList" @imageTap="onCardSwiperClick"></card-swiper>

效果图