vue 3D 翻页效果

<template>
	<view class="swipe-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<view class="page">初始页</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0, // 触摸开始的 X 坐标
				moveX: 0, // 当前移动的 X 坐标
				threshold: 100, // 滑动阈值
			};
		},
		methods: {
			onTouchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			onTouchMove(event) {
				this.moveX = event.touches[0].clientX - this.startX;
			},
			onTouchEnd() {
				const page = document.getElementsByClassName("page")[0];
				if (this.moveX > this.threshold) {
					console.log("向右滑动");
					page.style.transformOrigin = 'right';
					
					const animation = page.animate(
						[{
								transform: 'rotateY(0deg)'
							},
							{
								transform: 'rotateY(90deg)'
							}
						], {
							duration: 1000,
							iterations: 1, //循环一次
							//fill: 'forwards'
						}
					);
					//动态加载数据
					animation.onfinish = () => {
						//animation.reverse();
						console.log('动画完成！');
						//数据渲染到.page元素中
					};
				} else if (this.moveX < -this.threshold) {
					console.log("向左滑动");
					page.style.transformOrigin = 'left';
					const animation = page.animate(
						[{
								transform: 'rotateY(0deg)'
							},
							{
								transform: 'rotateY(-90deg)'
							}
						], {
							duration: 1000,
							iterations: 1, //循环一次
							//fill: 'forwards' // 动画结束后保持最终状态
						}
					);
					//动态加载数据
					animation.onfinish = () => {
						//animation.reverse();
						console.log('动画完成2');
						//数据渲染到.page元素中
					};
				}
				this.moveX = 0; // 重置移动距离
			},
		}
	}
</script>

<style scoped lang="scss">
	.swipe-container {
		width: 100%;
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		
		perspective: 1000px;
	}

	.swipe-container .page {
		width: 100%;
		height: 100%;

		/* 保留 3D 变换 */
		transform-style: preserve-3d;
		background-color: red;
		
		/* 提示浏览器使用硬件加速 */
		will-change: transform;
	}
</style>