从零开始学习H5应用简单页面滑动切换效果详解编程语言

可曾看见过那些在微信上转疯了的H5神作？好生羡慕啊，那么从今天开始，我将从零开始学习制作H5应用，看看那么漂亮的页面是怎么样一步一步形成的。
准备在学习制作H5应用之前，必须具备以下基础前提：

HTML,CSS,JS基本编写与制作能力

了解了H5中的各种新特性

有一定的逻辑思维能力，可以将复杂任务通过分析简化为若干原子事件来处理

看得懂汉语，以及教程中出现的前端术语。

任务这是本系列的第一篇，任务非常简单，

制作一个具有3张页面，每次只显示其中一张页面，当手指向上滑动设备屏幕时当前页面消失下一张页面出现，并具有一定的过渡效果

分析虽然任务非常简单，我们还是要把它拆分为几部来做，如下：

1、构建页面：具有三张页面，第一张显示，另外两张隐藏；

2、使用JS监听手势向上滑动的事件，并动态改变三张页面的显示/隐藏样式；

3、给页面显示和隐藏添加过渡的动画效果；

实现第一步首先，我们在html页面中构建页面结构：
index.html
<div id=”pages”>
      <div class=”page page1″>页面一</div>
      <div class=”page page2″>页面二</div>
      <div class=”page page3″>页面三</div>
</div>

这里，我们为了方便看效果，在每个页面中加入了相应文字来标示该页面

然后，使用CSS文件进行样式布局：
style.css
#pages {  width: 100%;  heigt: 100%;}
.page {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  display: none;  color: white;}
.page1 {  background: blue;  display: block;}
.page2 {  background: red;}.page3 {  background: yellow;}

这里，设置了统一的样式.page 以便让三张页面都能全屏显示，并且设置绝对定位使他们完全重叠，给他们设置了不同背景色用于标识，并让第一页显示出来，其他两张隐藏。

给index.html引入样式：
<title>H5场景应用1.0——实现页面滑动效果</title> <link rel=”stylesheet” href=”style.css” type=”text/css”/>我们来看看效果：

我们使用了Opera Mobile Emulator工具来在PC上模拟手机浏览器的显示和操作。

至此，第一步就很简单地完成了。
第二步首先，我们要监听用户的手势，这个向上滑动的事件怎么来做呢？
这里，我们推荐使用zepto.js类库，因为它默认提供了对触屏的滑动事件的支持。
将zepto.js引入index.html，这里，为了提升加载速度，我们使用百度静态资源库文件,并且同时引入我们自己用来写自定义功能的js文件myfn.js，现在它还是空的。还有一个js文件touch.js是必须的，它是zepto的一个模块，用来支持触屏操作，而zepto.js默认是不包含该模块的
index.html
<script src=”http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js”></script><script src=”touch.js”></script><script src=”myfn.js”></script>现在，在myfn.js里实现监听函数和页面隐藏，显示函数。
myfn.js
//测试对swipeUp(向上滑动)的监听是否有效$(document).swipeUp(function(){ alert(“ok”);});保存，看看效果：

说明我们引入zepto后对触屏的向上滑动事件的监听是成功的，那么现在我们可以编写内部页面隐藏显示的切换效果了。
在编写代码之前，我们把这一步的逻辑流程再细化一下，看看流程图：
开始获取当前页面序号，隐藏当前页是否为最后一页？显示第一页结束显示下一页yesno
这里面，我们明确了整个程序的外部流程，然后再来深究一下每一步操作的思路：
获取当前页面序号：

很显然，当前页面就是当前显示的页面，可以有两种方法来获取：

第一种是给当前页面添加class=”show”，然后获取时直接查找class=”show”的元素；

第二种是设置一个全局变量curpage，页面初次载入时它的值肯定是1，然后每次向上滑动，它的值自增1，就是当前页面的序号；

很明显，第二种实现起来比第一种要简单，而且效率和架构更优。

隐藏当前页

给当前页添加class=”hide”

判断是否为最后一页

在获取到当前页面序号后，就要判断是否为最后一页。那么如何判断呢？当然是先要知道总共有多少页，然后看当前页面序号是否与最大页数相等，相等，就是最后一页，不相等，则不是最后一页。而总页数就是#page下面的class为.page 的div的个数。

显示第一页

这个很简单，给序号为1的页面设置class=”show”，将其他所有页面隐藏

显示下一页

获取到当前页序号后，这一步也很简单，就是让序号加1，然后让class为.page+序号的页面增加一个class=”show”就可以了

好了，有了以上分析，我们就可以开始编码了，最终实现代码如下：
myfn.js
var curpage=1;var totalpage,nextpage;$(document).swipeUp(function(){
//隐藏当前页面 $(“.page”+curpage).removeClass(“show”);
$(“.page”+curpage).addClass(“hide”); //判断当前页是否为最后一页       //获取总页数
totalpage = $(“.page”).length;
//如果是最后一页，显示第一页，否则显示下一页
if(curpage == totalpage){
      $(“.page1”).removeClass(“hide”);
      $(“.page1”).addClass(“show”);
      curpage =1;
}else{
      nextpage = curpage+1;
      $(“.page”+nextpage).removeClass(“hide”);
      $(“.page”+nextpage).addClass(“show”);
      curpage = nextpage;
}
}
);然后在style.css里加入两个样式：
style.css
.page3 {  background: yellow;}
.hide {  display: none;}
.show {  display: block;}
再来看效果：

页面刚载入是上图这样的

第一次向上滑动后切换到了页面二

第二次向上滑动后切换到了页面三

第三次向上滑动后页面又切回页面一
第三步接下来就要为我们的隐藏消失效果设置过渡效果了，那么前面我们学习过关于animation的动画效果就派上用场了，这里我们使用animation.css插件来省去编写animation动画的工作。
在index.html中加入以下引用：
<link rel=”stylesheet” href=”animations.css” type=”text/css”/>

然后将myfn.js做一下小小的改造：
myfn.js
var curpage=1;
var totalpage,nextpage;
$(document).swipeUp(function(){
//判断当前页是否为最后一页
//获取总页数
totalpage = $(“.page”).length;
//如果是最后一页，显示第一页，否则显示下一页
if(curpage == totalpage){
   $(“.page1”).removeClass(“hide”);
      $(“.page1”).addClass(“show”);
      $(“.page1”).addClass(“pt-page-moveFromBottom”);
      $(“.page”+curpage).removeClass(“show”);
      $(“.page”+curpage).addClass(“hide”);
      $(“.page”+curpage).addClass(“pt-page-moveToTop”);
      curpage =1;
}else{
      nextpage = curpage+1;
      $(“.page”+nextpage).removeClass(“hide”);
      $(“.page”+nextpage).addClass(“show”);
      $(“.page”+nextpage).addClass(“pt-page-moveFromBottom”);
      $(“.page”+curpage).removeClass(“show”);
      $(“.page”+curpage).addClass(“hide”);
      $(“.page”+curpage).addClass(“pt-page-moveToTop”);
      curpage = nextpage;
}
}
);

这其中的pt-page-moveFromBottom和pt-page-moveToTop就是animation.css里帮我们定义的移入移出动画了。

再打开手机浏览器测试，就可以看到两个页面之间的切换效果了。虽然切换效果中间有一瞬间是白场，这个问题我们在下一版进一步完善。

至此，我们用不多的代码完成了我们的V1.0版的任务，这一次代码不多，但是中间要对整个程序的流程进行分析与设计，这种思路是这一次的重点。这种思路确定后，以后的版本中在这一版本的基础上进行功能的扩展就简单多了。