ProAdvanced/pages/conversion-page/conversion/conversion.vue

<template>
	<view class="">
		<view class="conversion-bg">
			<image src="/static/conversion-bg.png"></image>
		</view>
		<!-- #ifndef MP-ALIPAY -->
		<view class="tower-swiper" :style="{'height':scrollHeight+'px'}" @touchmove="TowerMove" @touchstart="TowerStart"
		 @touchend="TowerEnd">
			<view class="tower-item" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--bottom':item.mLeft}]"
			 :data-direction="direction">
				<view class="swiper-item" @tap="onNavConver(item.page_type,$event)">
					<image :src="item.url" mode="aspectFit" v-if="item.type=='image'"></image>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['oldSwiperList']),
		data() {

			let tempList = [{
				id: 0,
				type: 'image',
				url: '/static/conversion/personal.png',
				name: "个人中心",
				page_type: "personal",
				zIndex: 2,
				mLeft: 0
			}, {
				id: 1,
				type: 'image',
				url: '/static/conversion/game.png',
				name: '游戏',
				page_type: "game",
				zIndex: 1,
				mLeft: 1
			}]
			return {
				cardCur: 0,
				swiperList: tempList,
				dotStyle: false,
				towerStart: 0,
				towerStartY: 0,
				direction: '',
				scrollHeight: 100,
				bTouchMove: false,
			}
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.scrollHeight = res.windowHeight;
					console.log("res==", res)
				}
			})
			
			if (this.oldSwiperList.length != 0)
				this.swiperList = this.oldSwiperList;

		},
		methods: {
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = list.length - i; // parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i; //i - parseInt(list.length/2)
					console.log(list[i].zIndex, list[i].mLeft, 0.5 + list[i].zIndex / 20);
				}
				this.swiperList = list
			},
			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX;
				this.towerStartY = e.touches[0].pageY;
			},

			// towerSwiper计算方向
			TowerMove(e) {
				// 简化，点击及操作
				this.direction = 'left'; // e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
				let moveX = e.touches[0].pageX - this.towerStart > 0 ? true : false;

				let moveY = e.touches[0].pageY - this.towerStartY > 0 ? true : false;

				this.bTouchMove = moveX || moveY;
			},
			// towerSwiper计算滚动
			TowerEnd(e) {

				if (!this.bTouchMove) return;

				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
					this.$store.state.oldSwiperList = this.swiperList;

					console.log("this.$store.state.oldSwiperList=", this.$store.state.oldSwiperList);
				}
				this.direction = ""
				this.swiperList = this.swiperList
				this.bTouchMove = false;
			},

			// 跳转对应页面
			onNavConver(type, event) {
				console.log("===", type, event);
				let url = '';
				switch (type) {
					case "personal":
						//个人中心页面
						url = '../../personal-page/personal/personal';
						break;
					case "game":
						url = '../../game-page/game/game';
						break;
					default:
						url = '../../personal-page/personal/personal';
						break;
				}
				uni.reLaunch({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.conversion-container {
		position: relative;
	}

	.conversion-bg {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 750rpx;
		height: 100%;
	}

	.conversion-bg image {
		width: 100%;
		height: 100%;
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.6 + var(--index)/10));
		margin-bottom: calc(var(--bottom) * 70px - 100px);
		z-index: var(--index);
	}


	.swiper-item image,
	.swiper-item video {
		width: 100%;
		display: block;
		height: 100%;
		margin: 0;
		pointer-events: none;
	}



	swiper-item {
		width: 610upx !important;
		left: 70upx;
		box-sizing: border-box;
		padding: 40upx 0upx 70upx;
		overflow: initial;
	}

	swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10upx;
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}


	.tower-swiper {
		height: 1334upx;
		position: relative;
		max-width: 750upx;
		overflow: hidden;

		/* background-color: #007AFF; */
	}

	/* 	.tower-swiper .tower-item {
		position: absolute;
		width: 750upx;
		height: 100%;
		top: 0;
		bottom: 10%;
		left: 0;
		margin: auto;
		transition: all 0.2s ease-in 0s;
		opacity: 1;
	} */

	.tower-swiper .tower-item.none {
		/* opacity: 0; */
	}

	.tower-swiper .tower-item .swiper-item {
		width: 100%;
		height: 100%;
		border-radius: 45upx;
		overflow: hidden;
	}
</style>