vue 3D 翻页效果 - ToB企服应用市场:ToB评测及商务社交产业平台

<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>

复制代码