在单页应用开发中,无论是页面结构化,还是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的需求,对于上面两种实现技术,都各有优缺点,大家可以对应自己的项目综合评估,然后决定使用哪种实现。

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

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

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

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

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  3. 高效开发 Web 单页应用解决方案

    于 2017 年初,有在 Github 建立并维护一个项目:Vue Boilerplate Template,欲成就一款开箱即用 Vue + Webpack 的脚手架模版:其目标与宗旨是:根据以往经验 ...

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

    一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...

  5. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  6. 单页应用Scrat实践

    单页应用Scrat实践 1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博 ...

  7. 【初恋】vue单页应用开发总结

    vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...

  8. web单页应用是什么?它的好处与坏处有哪些(如何解决这些缺点)

    web单页应用是什么? Web单页应用就是指只有一个Web页面作为入口的应用,在浏览器中运行期间不会重新加载页面.也就是说浏览器一开始会加载它必需的thml.css和Js,之后所有的交互操作都在一个页 ...

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

    背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...

随机推荐

  1. C#根据当前时间获取周,月,季度,年度等时间段的起止时间

    最近有个统计分布的需求,需要按统计本周,上周,本月,上月,本季度,上季度,本年度,上年度等时间统计分布趋势,所以这里就涉及到计算周,月,季度,年度等的起止时间了,下面总结一下C#中关于根据当前时间获取 ...

  2. SQL统计——按照各种维度

    在SQLserver中可以按照各种维度进行统计,实现与EXCLE一样强大的功能. --========================== --Blog:<奔跑的金鱼> --Desc:&l ...

  3. apache 配置order allow deny讲解

    http://www.111cn.net/phper/apache/43025.htm

  4. [C++STDlib基础]关于C标准输入输出的操作——C++标准库头文件&lt;cstdio&gt;

    网上实例 总结 /* _STD_BEGIN using _CSTD clearerr; using _CSTD fclose; using _CSTD feof; using _CSTD ferror ...

  5. 图解JQUERY尺寸及位置定义

    最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerH ...

  6. W班-项目选题报告成绩

    作业链接 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/907 作业要求 1份团队选题报告(word电 ...

  7. linux查看系统的日志------健康检查特性

    last https://www.cnblogs.com/anruy/articles/5541675.html                 Nginx反向代理,健康状态检测,过载保护及配置文件详 ...

  8. numpy中的random函数

    1:rand rand(d0, d1, ..., dn)    Random values in a given shape.    Create an array of the given shap ...

  9. nslookup域名查询命令查询ip

    一.nslookup(name server lookup ) nslookup可以指定查询的类型,可以查到DNS记录的生存时间还可以指定使用哪个DNS服务器进行解释.在已安装TCP/IP协议的电脑上 ...

  10. putty的基本使用

    1.输入你要连接的目标的IP地址,输入你要给它取的名字,点击保存 2.选中你保存的会话,点击打开,即可打开会话 3.输入你连接的目标的用户账号,回车,再输入密码.即可正常使用. 4.编码的设置 在出现 ...