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>
相关推荐
老A技术联盟6 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游9 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte14 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟23 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor23 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter24 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝26 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽26 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥27 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
请你吃div32 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试