文档章节

Android版添加phonegap--iscroll4框架插件教程

大街小巷
 大街小巷
发布于 2015/12/29 14:59
字数 1743
阅读 41
收藏 1

最优的使用iScroll的结构如下所示:
//isScroll JS
var myScroll;
function loaded() {
myScroll = new iScroll(‘wrapper’, { checkDOMChanges: true });
 /*  
setInterval(function () {  
if (myScroll.isReady())  
document.getElementById(‘thelist’).innerHTML += ‘<UL><LI>new row</LI></UL>’;  
}, 2000);  
*/
}
document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);  
document.addEventListener(‘DOMContentLoaded’, loaded, false);  
<div id="wrapper">  
<div id="scroller">  
<ul>  
<li></li>  
</ul>  
</div>  
</div>

iScroll里传递的参数
iScroll里的第二个参数允许你自定义一些内容,比如下面的这段代码:
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
第二个参数通常都是一个对象,像上面的这个例子里就设定了不显示滚动条。常用的参数如下:
hScroll          false 禁止横向滚动true横向滚动默认为true
vScroll          false 精致垂直滚动true垂直滚动默认为true
hScrollbar         false隐藏水平方向上的滚动条
vScrollbar         false 隐藏垂直方向上的滚动条
fixedScrollbar 在IOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true,IOS上为false。
fadeScrollbar  false 指定在无渐隐效果时隐藏滚动条
hideScrollbar  在没有用户交互时隐藏滚动条 默认为true
bounce     启用或禁用边界的反弹,默认为true
momentum    启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用
lockDirection  false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)

iScroll拉动刷新(pull to refresh)
自从Twitter和一些 Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行。你可以看看这儿先一睹为快。 我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容,不过一旦DOM树发生了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然,如果 你不想使用这个延迟,那就把setTimeout方法去掉就行了。

iScroll拉动刷新(pull to refresh)
自从Twitter和一些Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行。你可以看看这儿先一睹为快。 我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容,不过一旦DOM树发生 了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然,如果 你不想使用这个延迟,那就把setTimeout方法去掉就行了。

iScroll缩放(pinch / zoom)
我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放大和缩小。想要这个功能,只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。 双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能,至少需要如下配置:
var myScroll =new iScroll("wrapper",{zoom:true});
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项:
zoomMax 指定允许放大的最大倍数,默认为4。

【注意】:如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说,就是在所有需要缩放的 img元素上使用-webkit-transform:translate3d(0,0,0)来实现,而且尤为重要的是,硬件的加速会占用大量 资源,要谨慎使用,否则你的应用可能就此崩溃。

iScroll捕捉元素(snap and snap to element)
捕捉的功能会促使scroller去重新定义位置,这样可以制作更加花哨的传送带效果。点击这里有个小例子。 默认情况下,iScroll将scroller分成四分体,或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的 任何元素,不考虑外部wrapper的大小。如果你想要实现这样的传送带效果,我建议你使用“quadrant”分割。最佳的设 置如下:
var myscroll=new iScroll("wrapper",{  
   snap:true,  
   momentum:false,  
   hScrollbar:false,  
   vScrollbar: false
});
iScroll捕获元素,可以通过传递一个字符串来作为查询条件,如下:
var myscroll=new iScroll("wrapper",{  
      snap:"li",  
      momentum:false,  
      hScrollbar:false,  
      vScrollbar:false
});
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素

iScroll自定义滚动条(custom scrollbars)
在iScroll 4这个版本中,可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数,如下:
var myscroll=new iScroll("wrapper",{  
scrollbarClass: "myScrollbar"
});
可以看例子,在这个例子里,myScrollbarH这个类被添加到了水平滚动条上,myScrollbarV这个类则被添加给了垂直方向上的滚动条上了。需要提醒的是,滚动条是由两个元素组合而成的:容器和显示器。容器同 wrapper的高度相同,而显示器则代表的是滚动条本身。
滚动条的HTML结构如下:
<div class="myScrollbarV">  
 <div></div>  
  </div>  
.myscrollbarV{  
position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;  
  }  
.myScrollbarV  div {
position:absolute;  
z-index:100;  
width:100%;  
 background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));  
 border:1px solid #800;
-webkit-background-clip:padding-box;  
-webkit-box-sizing:border-box;  
-webkit-border-radius:4px;  
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);  
}

iScroll通用方法:
(1)refresh  在DOM树发生变化时,应该调用此方法
(2)scrollTo()  滚动到某个位置 eg: myscroll.scrollTo(0,10,200,true);
(3)scrollToElement()  滚动到某个元素 eg: myscroll.scrolToElement("li:nth-child(10)",100);
(4)detroy() 完全消除myscroll及其占用的内存空间 eg: myscroll.destroy()

KeyMob移动广告平台,是中国专业的广告优化管理平台,为广告主提供专业的移动广告投放、IOS、Android应用交叉推广、移动营销广告高效的优化管理等服务,为应用开发者提供高效、稳定的手机广告SDK,助力应用开发者获取最大化广告收入

© 著作权归作者所有

大街小巷
粉丝 8
博文 208
码字总数 130367
作品 0
长沙
私信 提问
phonegap android开发初体验

最近想学习一下手机上的web app开发,朋友推荐phonegap是一个很不错的跨平台开发框架,下面是初次使用的一些总结总结。 1、开发环境配置 系统要求可以具体参考:http://developer.android.co...

弓影
2011/11/14
0
2
基于PhoneGap的Android应用开发-Get started

PhoneGap是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化,提供了一系列...

无鸯
2011/09/09
1K
1
使用The PhoneGap Developer App实现快速调试项目

如今,基于 PhoneGap 的混合 APP 开发技术更加成熟,优势更加凸显。移动互联网的迅猛发展,Android 和 iOS 的版本快速迭代,使 HTML5 的性能问题逐步解决。仅仅在 PhoneGap 官网上,已经有来...

crazymus
2015/04/26
0
0
phoneGap3.0安装步骤(以windows下的android环境为例):

phoneGap3.0安装步骤(以windows下的android环境为例): 环境: WIN系统,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova) 1. 安装JRE,设置JAVAHOME,比如JAVAHOME=C:programJavaj...

kisshua
2014/03/05
0
0
使用 Jo 和 PhoneGap 构建本地移动应用程序

移动应用程序开发正在飞速发展;一部分原因是出现了可以简化开发的新框架,这种新框架也使传统 web 开发人员可以更快上手。本文将介绍如何利用您已经掌握的 HTML、CSS 和 JavaScript 技能和两...

IBMdW
2012/03/27
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
3
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
5
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部