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>
相关推荐
拾光拾趣录29 分钟前
一张 8K 海报差点把首屏拖垮
前端·性能优化
天涯学馆36 分钟前
为什么越来越多开发者偷偷用上了 Svelte?
前端·javascript·svelte
Silver〄line44 分钟前
前端图像视频实时检测
前端·目标检测·canva可画
三月的一天1 小时前
React+threejs两种3D多场景渲染方案
前端·react.js·前端框架
拾光拾趣录1 小时前
为什么浏览器那条“假进度”救不了我们?
前端·javascript·浏览器
香菜狗1 小时前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
拾光拾趣录1 小时前
老板突然要看“代码当量 KPI”
前端·node.js
拾光拾趣录1 小时前
为什么我们要亲手“捏”一个 Vue 项目?
前端·vue.js·性能优化
油丶酸萝卜别吃2 小时前
SSE与Websocket有什么区别?
前端·javascript·网络·网络协议
顽疲2 小时前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app