iScroll5_API速查随记.doc 22页

  • 2
  • 0
  • 0
  • 约1.31万字
  • 2016-09-16 发布
文档工具:
    1. 1、本文档共22页,可阅读全部内容。
    2. 2、本文档内容版权归属内容提供方,所产生的收益全部归内容提供方所有。如果您对本文有版权争议,可选择认领,认领后既往收益都归您。
    3. 3、本文档由用户上传,本站不保证质量和数量令人满意,可能有诸多瑕疵,付费之前,请仔细先通过免费阅读内容等途径辨别内容交易风险。如存在严重挂羊头卖狗肉之情形,可联系本站下载客服投诉处理。
    4. 文档侵权举报电话:19940600175。
    iScroll5 API速查随记 版本 针对IScroll的优化。为了达到更高的性能,IScroll分为了多个版本。你可以选择最适合你的版本。 目前我们有以下版本: IScroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。 iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。 iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。 iscroll-zoom.js,在标准滚动功能上增加缩放功能。 iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。 入门 IScroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。 尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。 最佳的html结构如下: <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> iScroll作用于滚动区域的外层。在上面的例子中,UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略。 最基本的脚本初始化的方式如下: <script type="text/javascript"> var myScroll = new IScroll('#wrapper'); </script> 第一个参数可以是滚动容器元素的DOM选择器字符串,也可以是滚动容器元素的引用对象。下面是一个有效的语法: var wrapper = document.getElementById('wrapper'); var myScroll = new IScroll(wrapper); 所以基本上你要么直接传递元素,要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下: var myScroll = new IScroll('.wrapper'); 注意,iScroll使用的是querySelector 而不是 querySelectorAll,所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll,你需要构建自己的循环机制。 初始化 当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。 在DOMContentLoaded事件中或者inline initialization中做也可以,需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度,iScroll的滚动尺寸有可能会错误。 为滚动起容器增加position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。 综上所述,最小的iScroll配置如下: <head> ... <script type="text/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new IScroll('#wrapper'); } </script> </head> ... <body onload="loaded()"> <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> </body> 如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。 配置 在iScroll

    文档评论(0)

    • 内容提供方:共享文档
    • 审核时间:2016-09-16
    • 审核编号:7162021115000036

    相关文档

    相关课程推荐