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>
相关推荐
IT_陈寒6 分钟前
5个Java 21新特性实战技巧,让你的代码性能飙升200%!
前端·人工智能·后端
咖啡の猫8 分钟前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'14 分钟前
使用css `focus-visible` 改善用户体验
前端·css·ux
前端双越老师18 分钟前
译: 构建高效 AI Agent 智能体
前端·node.js·agent
艾小码26 分钟前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript
liangshanbo12156 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
CV实验室7 小时前
TIP 2025 | 哈工大&哈佛等提出 TripleMixer:攻克雨雪雾干扰的3D点云去噪网络!
人工智能·计算机视觉·3d·论文
哆啦A梦15888 小时前
搜索页面布局
前端·vue.js·node.js