"从零开始学习H5应用(1)——V1.0版,简单页面滑动切换效果"


title: "从零开始学习H5应用(1)——V1.0版,简单页面滑动切换效果" layout: post category: 技术-前端 date: 2016-06-15 16:00:00 +0800 author: hjb2722404 tags: H5,教程 status: publish


可曾看见过那些在微信上转疯了的H5神作?好生羡慕啊,那么从今天开始,我将从零开始学习制作H5应用,看看那么漂亮的页面是怎么样一步一步形成的。

2016年2月更新:之前很多朋友问我要源码,由于工作原因,一直没来得及上传,今天已上传至github,点击下面的地址可查看下载最终源码:

[该案例git代码仓库][1]

准备

在学习制作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][2]是必须的,它是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后对触屏的向上滑动事件的监听是成功的,那么现在我们可以编写内部页面隐藏显示的切换效果了。

在编写代码之前,我们把这一步的逻辑流程再细化一下,看看流程图:

Created with Raphaël 2.1.0开始 获取当前页面序号,隐藏当前页是否为最后一页?显示第一页结束显示下一页yesno [1]: https://github.com/hjb2722404/h_albumTp [2]: https://github.com/madrobby/zepto/blob/master/src/touch.js