封装了一个小插件模拟fullPage的全屏滚动效果，比较简单。
特点：
1. 纯js实现，小巧轻便。
2. 兼容性好。苹果、安卓都没问题，暂时没遇到问题机型。
缺点：
1. 仅封装了基础功能，HTML、css么有去封装。个人觉得不封装更方便大家使用。
接下来看看效果图：
相比效果大家都看到了，接下来看看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端滚屏效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.g-fullPage{
width: 100%;
height: 100%;
overflow: hidden;
}
.g-fullPage div{
width: 100%;
height: 100%;
text-align: center;
line-height: 100%;
transition: 0.5s ease-in;
}
.g-fullPage div:nth-child(1){
background-color: #D5F1FD;
}
.g-fullPage div:nth-child(2){
background-color: aquamarine;
}
.g-fullPage div:nth-child(3){
background-color: mediumseagreen;
}
</style>
</head>
<body>
<div class="g-fullPage">
<div class="f-pageFirst">1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<script type="text/javascript">
/*
mainClass 滑动父容器类名
firstClass 第一页的类名
num 总页数
*/
function fullPage(mainClass, firstClass, num) {
var startX = 0, //初始横坐标
startY = 0, //初始纵坐标
marginTop = 0, //上下滑动变量
touchNum = 0, //上滑极限，是否可以上滑
touchFlag = true, //可滑动标志 true 可滑动，false 不可滑
bodyHeight = document.body.offsetHeight,
page = document.getElementsByClassName(mainClass)[0],
pageFirst = document.getElementsByClassName(firstClass)[0];
//获取触摸的初识坐标
page.addEventListener("touchstart",function(e){
e.preventDefault();
startX = e.targetTouches[0].clientX;
startY = e.targetTouches[0].clientY;
})
//重置触摸的坐标值
page.addEventListener("touchend",function(e){
e.preventDefault();
startX = 0;
startY = 0;
touchFlag = true;
})
//监听并实现 上、下 滑动效果
page.addEventListener("touchmove",function(e){
e.preventDefault();
var newX = e.targetTouches[0].clientX,
newY = e.targetTouches[0].clientY;
if (newY - startY > 50) {
if (touchFlag == true && touchNum > 0) {
console.log("下滑");
touchFlag = false;
marginTop += 1;
touchNum -= 1;
pageFirst.style.marginTop = marginTop * bodyHeight+"px";
}
} else if (newY - startY < -50) {
if (touchFlag == true && marginTop > -num+1) {
console.log("上滑");
touchFlag = false;
marginTop -= 1;
touchNum += 1;
pageFirst.style.marginTop = marginTop * bodyHeight+"px";
}
}
})
}
fullPage("g-fullPage", "f-pageFirst",3);
</script>
</html>
很简单的一个功能，现在简略解释一下代码：
1. 监听 touchstart ，获取触摸初始坐标； 监听 touchmove，获取活动过程中的触摸点坐标，二者做差. >0 下滑；<0 上滑
2. 当滑动纵坐标差值超过50 ，调节div的 marginTop，显示不同div内容
这里面有几个注意点：
1. margin、top等样式，如果写在样式表里，js获取不到，能取到兼容性也不好。具体原因这里不细说了。但是内联样式可以取到。 这里仅做提醒，避免同志们入坑。
2. 记得阻止默认事件。
好啦，个人能力有限，若代码有问题，希望道友们指出，我们共同学习。 喜欢我的博客的朋友可以关注我，近期会出几篇 vue2.0+vuex 的博客（react的也会有，具体看时间啦），有需要的可以过来看看吆!
原文地址：https://www.cnblogs.com/pengfei-nie/p/9068568.html
时间： 2024-12-12 09:58:26