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>