移动端上下滑动切换屏幕的实现

前言

看过了不少移动端上下滑动切换屏幕的效果，于是自己拿简历试着实现了一下。本文原创，若有转载敬请告知谢谢。
效果可看:滑动切换屏幕效果或者扫描二维码。

github地址

http://github.com/Lsxj/cv. 技术不精，若有Bug欢迎指正！
原文可看我的个人网站：http://lsxj615.com/2016/07/21/mobile-touch-switch/

实现过程

1. 大体思路

   页面的切换主要是采用css3动画效果transform:translateY()来实现。事件监听主要以touchstart,touchmove,touchend。

2. HTML结构

    ... ... ... ... ...

1. ### CSS样式如下：

html,body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.container > section {
position: relative;
width: 100%;
height: 100%;
}

其中-webkit-backface-visibility:hidden是为了隐藏被旋转的元素的背面。关于动画效果，由于我采用的SCSS，在更改时只需要更改$n即container内section的个数，较为便捷。

//以下为SCSS部分：
$n:5;
@function getContentTopOffset($i) {
@return -100%*$i+100%;
}
@for $i from 1 through $n {
.slideto# {$i} {
transform: translateY(getContentTopOffset($i));
}
}
//CSS的效果如下：
.slide_to_1 {
transform: translateY(0%); }

.slide_to_2 {
transform: translateY(-100%); }

.slide_to_3 {
transform: translateY(-200%); }

.slide_to_4 {
transform: translateY(-300%); }

.slide_to_5 {
transform: translateY(-400%); }

切换的效果示意图如下：container相当于红色边框矩形，内容部分就相当于白色部分。下图为最初效果，红色矩形内为可见的。如图1.当container执行translateY(-100%)时，就相当于内容部分向上移动了100%，即显示了下一部分的页面。如图2所示。图1：最初效果     图2：移动后的效果1. ### js实现知道如何切换页面之后就好办了。

var cur_page = 1, //当前页数
slide_range = 30,
page_count = 5,//共有5页
obj_container = '.container';//需要切换页面的元素
$(document).on("touchstart",obj_container, function(e){
touchFirst_obj = {
startY: e.touches[0].clientY
};
});//记录起始触屏位置

$(document).on("touchmove",obj_container, function(e){
e.preventDefault();//阻止浏览器默认事件
touchLast_obj = e.touches[0];
moveY = touchLast_obj.clientY - touchFirst_obj.startY;
});

$(document).on("touchstart",obj_container, function(e){
if(moveY > 0) { //向上滑
moveUp();
} else if(moveY < 0) { //向下滑
moveDown();
}
if(moveY != 0) {//如果有滑动，则需要切换页面
switching();
}
});

function moveDown() { //向下滑
if(cur_page == +page_count) {
return;
}
cur_page++;
}

function moveUp() { //向上滑
if(cur_page == 1) return;
cur_page--;
}

function switching() {//切换页面
$(obj_selector).attr('class', obj_container + ' slideto' + cur_page);
}

原创，若有转载请告知。谢谢！JavaScript, css, html,

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！