一、具体场景
公司要求做一个H5的页面,可以翻页,做出每一页淡入淡出的效果 (安排)
因为页面内容不多,所以我采取的是一个大的div去装载多个div页面的方式
然后让这些装载页面的div绝对定位在最外面的大盒子中,通过控制每个页面
div的z-index来决定显示的页面
血泪分割点
一开始我并不是要用z-index这种方式的,而是一整个div从上而下排列下来,然后通过display来控制页面的显示,但是因为 transition和display两个人好像水火不容,导致了许多bug,查阅各大资料====传送门====才了解到其中的奥秘!
二、手指翻页
代码直接上
$(".index").on("touchstart", (e) => {
// e.preventDefault();
this.startX = e.originalEvent.changedTouches[0].pageX,
this.startY = e.originalEvent.changedTouches[0].pageY;
});
$(".index").on("touchmove", (e) => {
// e.preventDefault();
console.log(e.originalEvent)
console.log(e.originalEvent.changedTouches[0])
this.moveEndX = e.originalEvent.changedTouches[0].pageX
this.moveEndY = e.originalEvent.changedTouches[0].pageY
let X = this.moveEndX - this.startX
let Y = this.moveEndY - this.startY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
// alert("left 2 right");
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
// alert("right 2 left");
} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {