H5页面滑动，一次滑动一屏。
用到的属性
- 主要用到
jquery中的animate函数。 - 滑动监听（touch事件）。
- 对css中
overflow属性的控制。
实现步骤
- 以四个页面为例，将这四个页面的高度都设置为100%，每一块都能充满当前屏幕。
- 通过
clientHeight获得每个页面的实际高度。 - 通过调用jq中的animate函数来实现一个页面滚动的动画效果。如果不用这个函数用原生 scrollTop，可能会遇到函数无效的情况，这个时候首先要检查绑定的dom对象有没有设置高度，并且有没有设置overflow属性，可以设置为scroll或者auto等。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=1.0">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>移动端滑动翻页效果</title>
<style>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body,html{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
}
.container-block{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 18px;
color: #ffffff;
}
.d1{
background-color:rgb(11, 104, 91);
}
.d2{
background-color:rgb(15, 143, 32);
}
.d3{
background-color:rgb(182, 115, 61);
}
.d4{
background-color:rgb(80, 48, 221);
}
</style>
</head>
<body>
<div class="container">
<div class="container-block d1"> DIV1 </div>
<div class="container-block d2"> DIV2 </div>
<div class="container-block d3"> DIV3 </div>
<div class="container-block d4"> DIV4 </div>
</div>
</body>
<script>
var pageNumber = 0; //当前页码
var scrollNumber = 0; //滚动距离
var touchstart = 0; //开始滑动y坐标
var touchend = 0; //停止滑动y坐标
var allpage = 4; //页面数
var pageHeight = $('.d1')[0].clientHeight; //单个page高度
//手指接触屏幕
$('.container').on('touchstart',function(e){
touchstart = e.originalEvent.touches[0].pageY;
$(".container").css({
"overflow-y":"hidden"});
})
//手指停止屏幕
$('.container').on('touchend',function(e){
touchend = e.originalEvent.changedTouches[0].pageY;
console.log((touchstart - touchend));
if(touchstart > touchend){
if( (touchstart - touchend) > 10){
if(pageNumber >= allpage-1){
pageNumber = allpage-1;
return false;
}
$(".container").css({
"overflow-y":"scroll"});
pageNumber+=1;
if(pageNumber == "5"){
return false;
}
$(".container").animate({
scrollTop:pageHeight*pageNumber},1000,function(){
console.log(123123);
});
}
}else{
if( (touchend - touchstart) > 10){
if(pageNumber <= 0){
pageNumber = 0;
return false;
}
$(".container").css({
"overflow-y":"scroll"});
pageNumber-=1;
if(pageNumber == "-1"){
return false;
}
$(".container").animate({
scrollTop:pageHeight*pageNumber},1000);
}
}
});
</script>
</html>