移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)

在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动。当下的移动web技术,主要使用下面两种方式实现局部区域的滚动:

  • 基于IScroll组件,也有很多团队自己实现类似的组件,实现原理大都一样。
  • 使用浏览器原生支持overflow: scroll,在iOS下使用-webkit-overflow-scrolling: touch;实现惯性滚动。

IScroll实现

关于IScroll,大约半年前的一篇文章中 #1 ,对IScroll的观点是建议大家尽量少的使用,现在这个趋势在慢慢的发生变化。第一,1年前的操作系统还是以Android2.x为主,现在新上市的都是Android4.x,很多老的手机也会提示升级4.x。第二,移动浏览器的更新频次特别的快,比如UC浏览器,半年前还是7.x和8.x,现在已经更新到9.x。操作系统和浏览器的升级对于兼容性与性能方面都有很可观的提升。虽然没有使用工具做测试,但是一个很直观的使用感受就是,早些时候使用iScroll4写的程序,在相同的测试机(升级过浏览器)下跑,运行效率有明显的提升。IScroll正在开发最新的5.x,虽然没有正式发布,从源码上看,整体设计比4.x高了不止一个档次,有兴趣的同学可以去阅读对比。

下面这个例子是我使用IScroll5,实现的Pull to Request,在官方的例子库中还没有提供支持Pull to Request的接口,现在IScroll的接口还不是很完善,也有很多bug。猛戳例子:http://jsbin.com/AtIGeKe/latest

在这个例子中,与4.x的pull-to-request例子最大的一个实现区别是topOffset参数与Event接口。

在4.x中是使用topOffset参数设置顶部偏移值,而5.x中top offset这个值是在wrapper对的样式中设定,这个设计十分巧妙。

另一个就是事件回调,4.x的事件函数都是已参数形式传入,5.x使用on()接口实现事件监听。

下面是IScroll4 pull-to-request的例子: http://lab.cubiq.org/iscroll/examples/pull-to-refresh/ ,大家可以自行对比。

原生支持overflow: scroll

-webkit-overflow-scrolling: touch;是iOS5时候提供的一个特性,支持局部区域的快速滚动、惯性滚动和回弹效果。有兴趣了解的可以参考这篇文章: http://blog.csdn.net/hursing/article/details/9186199

-webkit-overflow-scrolling: touch;并不被Android支持,所以Android下局部滚动会卡卡的。可以在Android浏览器下运行下面这段代码,会输出false:

!!(‘WebkitOverflowScrolling‘ in document.documentElement.style)

overflow: scroll的兼容性会有点问题,Android3+才支持。使用overflow: scroll实现多视图布局的原理与IScroll是一样的,给内容外层容器加下面的样式就可以了:

.wrapper {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Pull to Request与IScroll的实现就会有区别,为此我开发了一个组件dragloader.js,帮助原生局部滚动下实现Pull to Request,项目地址:https://github.com/maxzhang/dragloader

猛戳例子:http://jsbin.com/UGajALA/latest

总结

在做单页应用开发式,无法避免多视图结构,必然会有单视图的局部滚动和Pull to Request的需求,对于上面两种实现技术,都各有优缺点,大家可以对应自己的项目综合评估,然后决定使用哪种实现。

时间: 2024-10-24 20:29:53

移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)的相关文章

【转】移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

html5手机Web单页应用实践--起点移动阅读

一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发现越改越多越改越多- 注意此web应用只支持android及iphone内的浏览器,及PC或mac上的chrome,safari,firefox等支持html5的浏览器.IE10以上浏览器 这算是试验版了吧,以前没这么弄过.. 手机访问http://crapi.4gshu.com:8096/4g-r

单页应用Scrat实践

单页应用Scrat实践 1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away,幸运的是现在有很多前端大神积极的分享自己的经验,比如百度这位https://github.com/fouber/blog/issues/4. 将iframe项目使用多页HTML与FIS重构以后,前端已经得到了极大的优化,然而多页HTML带来的状态丢失(登录信息,菜单信息),

ASP.NET Aries 入门开发教程4:查询区的下拉配置

背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式化配置 #是否 PS:格式化配置除了用来格式化表格的内容,同样也会下拉进行格式化. 效果: 那“#是否”是哪里来的? 在配置维护里来的,对于固定的选项,统一在这里配置: 2:查询框下拉能不能多选? 配置格式规则即可:multiple属性 效果: 3:查询框下拉能不能级联? 配置格式化规则指向上一级即

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

基于Redux架构的单页应用开发总结(二)

写在前面 这次重点介绍基于Redux架构的单页应用代码的组织方式 关于less的组织 作为一个后端出身的前端工程师,写简单的css实在没有那种代码可配置和结构化的快感.所以引入less是个不错的选择,无论是针对代码后期的管理,还是提高代码的复用能力. global.less 这个是全局都可以调用的方法库,我习惯把 项目的配色.各种字号.用于引入混出的方法等写在这里,其他container页面通过@import方式引入它,就可以使用里面的东西.不过定义它时要注意以下两点: 第一,这个less里只能

web单页应用(一)

构建第一个单页应用 1.html页面结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css"&

高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输入时显示一个提示字符串.由于Background对ComboBox无效,所以直接通过Background来实现是不行了.需要重新写ComboBox的模板,也就是Template,自定义一个模板来实现这个结果.又看了一下QQ的下拉框,这玩意不自定义也难以实现,所以就干脆自定义了. 先上代码,先是Com