vue 3D 翻页效果

1. <template>
2.         <view class="swipe-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
3.                 <view class="page">初始页</view>
4.         </view>
5. </template>
7. <script>
8.         export default {
9.                 data() {
10.                         return {
11.                                 startX: 0, // 触摸开始的 X 坐标
12.                                 moveX: 0, // 当前移动的 X 坐标
13.                                 threshold: 100, // 滑动阈值
14.                         };
15.                 },
16.                 methods: {
17.                         onTouchStart(event) {
18.                                 this.startX = event.touches[0].clientX;
19.                         },
20.                         onTouchMove(event) {
21.                                 this.moveX = event.touches[0].clientX - this.startX;
22.                         },
23.                         onTouchEnd() {
24.                                 const page = document.getElementsByClassName("page")[0];
25.                                 if (this.moveX > this.threshold) {
26.                                         console.log("向右滑动");
27.                                         page.style.transformOrigin = 'right';
28.                                        
29.                                         const animation = page.animate(
30.                                                 [{
31.                                                                 transform: 'rotateY(0deg)'
32.                                                         },
33.                                                         {
34.                                                                 transform: 'rotateY(90deg)'
35.                                                         }
36.                                                 ], {
37.                                                         duration: 1000,
38.                                                         iterations: 1, //循环一次
39.                                                         //fill: 'forwards'
40.                                                 }
41.                                         );
42.                                         //动态加载数据
43.                                         animation.onfinish = () => {
44.                                                 //animation.reverse();
45.                                                 console.log('动画完成！');
46.                                                 //数据渲染到.page元素中
47.                                         };
48.                                 } else if (this.moveX < -this.threshold) {
49.                                         console.log("向左滑动");
50.                                         page.style.transformOrigin = 'left';
51.                                         const animation = page.animate(
52.                                                 [{
53.                                                                 transform: 'rotateY(0deg)'
54.                                                         },
55.                                                         {
56.                                                                 transform: 'rotateY(-90deg)'
57.                                                         }
58.                                                 ], {
59.                                                         duration: 1000,
60.                                                         iterations: 1, //循环一次
61.                                                         //fill: 'forwards' // 动画结束后保持最终状态
62.                                                 }
63.                                         );
64.                                         //动态加载数据
65.                                         animation.onfinish = () => {
66.                                                 //animation.reverse();
67.                                                 console.log('动画完成2');
68.                                                 //数据渲染到.page元素中
69.                                         };
70.                                 }
71.                                 this.moveX = 0; // 重置移动距离
72.                         },
73.                 }
74.         }
75. </script>
77. <style scoped lang="scss">
78.         .swipe-container {
79.                 width: 100%;
80.                 height: 500px;
81.                 display: flex;
82.                 justify-content: center;
83.                 align-items: center;
84.                
85.                 perspective: 1000px;
86.         }
88.         .swipe-container .page {
89.                 width: 100%;
90.                 height: 100%;
92.                 /* 保留 3D 变换 */
93.                 transform-style: preserve-3d;
94.                 background-color: red;
95.                
96.                 /* 提示浏览器使用硬件加速 */
97.                 will-change: transform;
98.         }
99. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。