Nova PhoneGap框架 第八章 滚动条

时间:2021-11-17 08:51:37

你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出,但如果你有过PhoneGap开发经验的话,你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事。

8.1 概述

目前主流的PhoneGap框架或者库都花了很大的力气来实现滚动条,比如jQueryMobile, Sencha Touch,KendoUI,Intel App Framework (以前叫jqMobi),甚至还有一个专门只做滚动条而变得很出名的iScroll。

出现滚动条百家争鸣的原因是,低版本的Android和iOS不支持CSS样式overflow: scroll。于是才会写JS来处理触摸三事件。

我们的框架也处理了滚动条,因此可以运行于低版本的Android和iOS设备。跟其他主流的PhoneGap框架不一样,我们的滚动条只用了很少的代码就实现了,这是因为得益于我们有固定尺寸的div#body,而其他框架都不会去要求程序员这样设计HTML。当你越多的使用我们的框架,做的程序越复杂,你就会发现固定尺寸的div#body会给你带来意想不到的惊喜,这些都是其他框架无法比拟的。

在我们的框架下使用滚动条也非常简单,通常只需要一行代码,如:new nova.Scroller("#content").init(); 如果你需要对这个scroller进行配置,那么在调用scroller实例的init方法前,可以设置scroller的相关属性。目前支持的特性包括:

l  横向滚动

l  纵向滚动

l  嵌套的滚动

8.2 已知问题

尽管我们通过触摸三事件实现了滚动条,但是这个滚动条对于表单的兼容性不好。滚动条和表单元素的兼容性也是所有其他滚动条的痛处,到现在为止,我还没有发现哪一家的滚动条能够完美兼容表单。

我们框架在滚动功能和表单元素的功能取舍上,牺牲了部分滚动功能,而让表单元素的功能更加强壮。这句话说得很抽象,实现的效果就是,所有表单元素会正常工作,但是滚动触摸的起点不能在表单元素上,也就是说,你不能把手指按住一个textbox然后再下拉滚动页面。