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>
相关推荐
huabuyu1 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z1 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行1 小时前
Android 15边到边模式
前端
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾1 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工1 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 小时前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒3 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端