论坛 › Oracle › vue 3D 翻页效果

没腿的鸟 发表于 2025-2-26 09:30:35

vue 3D 翻页效果

https://i-blog.csdnimg.cn/direct/be9b3a649851401689ecdf3b2d5ecb8e.png
https://i-blog.csdnimg.cn/direct/ea18f95be1a944f88dbd1447e1d1b3fe.png

<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.clientX;
                        },
                        onTouchMove(event) {
                                this.moveX = event.touches.clientX - this.startX;
                        },
                        onTouchEnd() {
                                const page = document.getElementsByClassName("page");
                                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>

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

查看完整版本: vue 3D 翻页效果