H5手机整屏向上滑动效果_微场景应用基础模板

.net 前端开发工具
web前端用什么开发工具
php前端用哪些开发工具

准备
在学习制作H5应用之前,必须具备以下基础前提:
html,css,js基本编写与制作能力
了解了H5中的各种新特性
有一定的逻辑思维能力,可以将复杂任务通过分析简化为若干原子事件来处理
看得懂汉语,以及教程中出现的前端术语。

任务
这是本系列的第一篇,任务非常简单,
制作一个具有3张页面,每次只显示其中一张页面,当手指向上滑动设备屏幕时当前页面消失下一张页面出现,并具有一定的过渡效果

分析
虽然任务非常简单,我们还是要把它拆分为几部来做,如下:
1、构建页面:具有三张页面,第一张显示,另外两张隐藏;
2、使用js监听手势向上滑动的事件,并动态改变三张页面的显示/隐藏样式;
3、给页面显示和隐藏添加过渡的动画效果;

实现
第一步
首先,我们在html页面中构建页面结构:
index.html
html 代码片段

<div id=”pages”>
    <div class=”page page1″>页面一</div>
    <div class=”page page2″>页面二</div>
    <div class=”page page3″>页面三</div>
</div>

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

然后,使用css文件进行样式布局:
style.css
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引入样式:
[quote]<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
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
javascript 代码片段

//测试对swipeUp(向上滑动)的监听是否有效
$(document).swipeUp(function() {
    alert(‘ok’)
})

这里面,我们明确了整个程序的外部流程,然后再来深究一下每一步操作的思路:
获取当前页面序号:
[quote] 很显然,当前页面就是当前显示的页面,可以有两种方法来获取:
第一种是给当前页面添加class=”show”,然后获取时直接查找class=”show”的元素;
第二种是设置一个全局变量curpage,页面初次载入时它的值肯定是1,然后每次向上滑动,它的值自增1,就是当前页面的序号;
很明显,第二种实现起来比第一种要简单,而且效率和架构更优。[/quote]

隐藏当前页

给当前页添加class=”hide”

判断是否为最后一页

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

显示第一页

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

显示下一页

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

好了,有了以上分析,我们就可以开始编码了,最终实现代码如下:
myfn.js
javascript 代码片段

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
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”/>
animation.css文件的下载地址:animation.css下载链接

然后将myfn.js做一下小小的改造:
myfn.js
javascript 代码片段

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里帮我们定义的移入移出动画了。

再打开手机浏览器测试,就可以看到两个页面之间的切换效果了。

objective c前端开发工具
前端比较好的开发工具
web 前端开发工具排名
» 本文来自:前端开发者 » 《H5手机整屏向上滑动效果_微场景应用基础模板》
» 本文链接地址:https://www.rokub.com/6373.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!