`
CshBBrain
  • 浏览: 650075 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144900
Group-logo
HTML5移动开发
浏览量:137844
社区版块
存档分类
最新评论

IScroll 实践指南(上)

阅读更多

转自:http://qbaty.iteye.com/blog/1221061

 

之所以iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 
这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。 
幸运的是移动webkit提供了一种强大的硬件加速的CSS属性,这个属性可以用来模拟这个缺失的功能,Iscroll从这里开始了前进之路,但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难 

iscroll官网 
iscroll例子 

截至到笔者发布这篇文章时,通过样式: 

Java代码  收藏代码
  1. overflow:scroll;  
  2. -webkit-overflow-scrolling:touch;  


IOS5 已经能够支持区域滚动了。但是andriod4 还是不行... 

iScroll 使用起来很简单,首先你需要一个合理的DOM结构: 

Java代码  收藏代码
  1. <div id="wrapper">  
  2.     <ul id="scroll">  
  3.         <li></li>  
  4.         ...  
  5.         ...  
  6.     </ul>  
  7. </div>  


其次是推荐的样式: 

Java代码  收藏代码
  1. #wrapper {  
  2.     position:relative;  
  3.     z-index:1;  
  4.     width:/* your desired width, auto and 100% are fine */;  
  5.     height:/* element height */;  
  6.     overflow:/* hidden|auto|scroll */;  
  7. }  


官方推荐这样的结构,因为iscroll只能滚动wrapper里的第一个子节点,或者说唯一一个子节点才能使得iscroll正确的生效。因为这个节点需要一个绝对定位的CSS属性,更重要的是这个节点里所包裹的内容有了一个统一的容器,我们只需要计算之后修改这个容器的属性值就可以达到我们滚动的效果。 

iscroll 需要两个参数,第一个很简单就是外容器的id,第二个参数是一个参数对象。 
通过这个对象可以传入iscroll的各项参数来配置iscroll。 
他的参数基本分为四个部分 

  • 基础
  • 滚动条
  • 放大缩小
  • 事件回调

以下由笔者整理的iScroll参数以及其代表的意思: 

Java代码  收藏代码
  1. hScroll: true//是否水平滚动  
  2. vScroll: true//是否垂直滚动  
  3. x: 0//滚动水平初始位置  
  4. y: 0//滚动垂直初始位置  
  5. bounce: true//是否超过实际位置反弹  
  6. bounceLock: false//当内容少于滚动是否可以反弹,这个实际用处不大  
  7. momentum: true//动量效果,拖动惯性  
  8. lockDirection: true,  
  9. //当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动  
  10. useTransform: true//是否使用CSS形变  
  11. useTransition: false//是否使用CSS变换  
  12. topOffset: 0//已经滚动的基准值(一般情况用不到)  
  13. checkDOMChanges: false//是否自动检测内容变化    


checkDOMChanges 这个不是十分靠得住,因为他目前是轮询检测offsetWidth、offsetHeight,然后才去调自身的refresh 重新计算滚动区域,但是有时候只检测这个不是很准.. 

Java代码  收藏代码
  1. // Scrollbar 的相关参数  
  2. hScrollbar: true//是否显示水平滚动条  
  3. vScrollbar: true//同上垂直滚动条  
  4. fixedScrollbar: isAndroid, //对andriod的fixed  
  5. hideScrollbar: isIDevice,  //是否隐藏滚动条  
  6. fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显  
  7. scrollbarClass: ''//字定义滚动条的样式名  


通过scrollbar这些参数可以配置iscroll的滚动条,通过scrollbarClass可以自己定义一套滚动条的样式。 

Java代码  收藏代码
  1. // Zoom 放大相关的参数  
  2. zoom: false//默认是否放大  
  3. zoomMin: 1//放大的最小倍数  
  4. zoomMax: 4//最大倍数  
  5. doubleTapZoom: 2//双触放大几倍  
  6. wheelAction: 'scroll'//鼠标滚动行为(还可以是zoom)  


这个Zoom我觉得比较好用,对于一个固定显示图片区域的类似应用,可以非常简单的做到固定滚动,包括两指放大的应用。 
wheelAction 这个参数是给PC的鼠标滚动定义的,可以定义为滚动鼠标滚轮放大。 

Java代码  收藏代码
  1. // 自定义 Events 的相关参数   
  2. onRefresh: null//refresh 的回调,关于自身何时调用refresh 后面会继续谈到  
  3. onBeforeScrollStart: function (e) { e.preventDefault(); },   
  4. //开始滚动前的时间回调,默认是阻止浏览器默认行为  
  5. onScrollStart: null//开始滚动的回调  
  6. onBeforeScrollMove: null//在内容移动前的回调  
  7. onScrollMove: null//内容移动的回调  
  8. onBeforeScrollEnd: null, 在滚动结束前的回调  
  9. onScrollEnd: null//在滚动完成后的回调  
  10. onTouchEnd: null//手离开屏幕后的回调  
  11. onDestroy: null//销毁实例的回调  
  12. onZoomStart: null,  
  13. onZoom: null,   
  14. onZoomEnd: null  


通过了解以上参数,你可以非常容易的配置自己的iscroll 应用: 
你可以通过onScrollEnd 事件回调在结束滚动后执行一段你自己的代码 
你也可以简单的新建一个可以通过双触放大的固定滚动区域。 
你也可以什么都不做,只是简单的约定碰到边界是否反弹,等等。 

Java代码  收藏代码
  1. var myscroll = new iScroll('wrapper', {  
  2.      hScroll: false//是否水平滚动  
  3.      vScroll: true//是否垂直滚动  
  4.      y: 10//滚动垂直初始位置  
  5.      bounce : false  
  6. });  


当然,在使用时,如果对创建的iscroll 实例保存引用会有很多好处: 
你可以在内容改变时,DOM结构发生改变时调用 myscroll.refresh() 来重新计算固定滚动区域的内容高度,从而使得你的iscroll工作正常。 
你也可以在你的应用结束时,用过这个引用调用destroy方法来,销毁这个iscroll 实例 
等等.... 
当然,iscroll提供的Api也是非常丰富,所以我们可以通过使用iscroll来做很多webapp的应用,下一篇文章我将会主要介绍一下iscroll的公用调用方法,以及参数的控制。 

分享到:
评论

相关推荐

    iscroll 下拉 上拉 刷新

    iscroll是一款轻量级、高性能的JavaScript库,专为处理触摸设备上的滚动事件而设计。它提供了一个简单易用的API,使得开发者能够轻松实现平滑的滚动效果,包括下拉刷新(pull-to-refresh)和上拉加载更多(infinite ...

    iscroll5上拉下拉实例完整demo

    **iscroll5上拉下拉实例完整demo**是基于iscroll5库的一个示例项目,主要针对移动Web环境,展示了如何实现平滑的滚动效果,包括上拉加载更多和下拉刷新的功能。iscroll5是Jacob Gohmann开发的一个轻量级的JavaScript...

    iscroll5 上拉刷新 下拉加载 实例

    **iscroll5上拉刷新与下拉加载实例详解** iscroll是一个轻量级的JavaScript库,主要用于处理网页上的滚动事件,特别是在触摸设备上。...通过实践这个实例,相信你能够更好地理解和运用iscroll5的这些高级特性。

    iScroll下拉刷新上滑加载

    iScroll下拉刷新上滑加载; 使用经典插件iScroll4稍作封装,采用ajax请求数据,实现移动端列表页的功能; 1.下拉刷新当前列表页数据; 2.上滑加载更多列表数据; iScroll4简介: iScroll 4 这个版本完全重写了...

    iscroll上拉加载

    通过这个简单的iscroll上拉加载示例,你可以了解到如何结合iscroll和自定义接口来实现动态加载内容的功能。在实际项目中,可能还需要根据具体需求进行调整和优化,例如增加加载指示器、错误处理等。希望这个教程对你...

    iscroll4

    **iscroll4** 是一个轻量级的JavaScript库,由Matteo Spinelli开发,用于在Web页面上实现平滑的滚动效果。iscroll主要用于处理触摸设备和鼠标滚轮事件,提供高性能的滚动功能,特别是在移动端,它可以替代浏览器原生...

    iscroll插件

    iscroll是一款轻量级的JavaScript插件,专为解决移动设备上的滚动问题而设计。在移动设备上,由于触摸事件的处理和原生滚动的复杂性,开发人员经常面临实现流畅滚动的挑战。iScroll通过提供高性能的滚动解决方案,很...

    Iscroll5 上拉刷新,下拉加载

    在本文中,我们将深入探讨如何使用Iscroll5库来实现网页中的上拉刷新和下拉加载功能。Iscroll5是一款强大的JavaScript滚动插件,适用于处理触摸设备和鼠标滚轮的滚动事件,尤其在移动端Web应用中广泛应用。我们将...

    基于iscroll 5 的上下拉刷新

    本文将详细讲解如何基于iscroll 5实现这个功能,并针对描述中的"代码比较乱"这一问题,提供清晰的步骤和优化建议。 iscroll 5是一款轻量级、高性能的JavaScript滚动库,它支持触摸、鼠标滚轮、快捷键等多种操作方式...

    iscroll5.2.0--页面下拉刷新,上拉分页加载

    4. 说明文档:可能包含如何配置iscroll,以及如何在项目中使用它的详细指南。 使用iscroll5.2.0进行开发时,需要注意以下几点: - **兼容性**:iscroll支持大部分现代浏览器,包括Chrome、Firefox、Safari、iOS ...

    iscroll上拉下滑加载数据效果-wap

    以下是关于iscroll上拉下滑加载数据的详细知识: 1. **iscroll的基本概念**:iscroll是由Matteo Spinelli开发的一个轻量级的JavaScript库,它可以为HTML元素提供高性能的滚动效果,支持鼠标滚轮、触摸滑动以及键盘...

    iscroll.js下载 5.1.3最新版本

    - **高性能**:iscroll采用硬件加速技术,确保在各种设备上都能流畅运行。 - **跨平台**:iscroll兼容各种现代浏览器,包括桌面端和移动端,如Chrome、Firefox、Safari、Android浏览器和iOS Safari。 - **易用性**:...

    iscroll5上拉下拉加载完整demo

    在IT行业中,iscroll5是一款广泛使用的JavaScript库,主要用于实现移动端网页的滚动效果,特别是处理触摸设备上的滚动事件。iscroll5提供了丰富的功能,包括精确的滚动定位、滚动动画、下拉刷新和上拉加载等,是开发...

    iscroll所用到的js文件

    iscroll是一款轻量级的JavaScript滚动库,由Matteo Spinelli开发,主要用于处理网页上的滚动事件,特别是在移动设备上。它能够提供流畅、高性能的滚动效果,支持滚动条、无限滚动、触摸事件、鼠标滚轮等多种功能。...

    iScroll v5.1.2 下拉刷新上拉加载demo

    本文将详细介绍iScroll 5的核心特性、下拉刷新与上拉加载的实现原理,以及如何自定义扩展这些功能。 首先,iScroll 5相较于早期版本,改进了性能和稳定性,优化了滚动体验。它支持多种滚动元素,如div、ul、li等,...

    iscroll4.js

    《iscroll4.js在HTML5页面中的应用及上拉刷新、下拉加载功能实现》 iscroll4.js是一款轻量级的JavaScript库,专为HTML5页面设计,用于...通过不断学习和实践,可以更好地利用iscroll4.js提升Web应用的性能和交互性。

    iscroll demo

    **iscroll 演示项目详解** iscroll 是一个轻量级、高性能的JavaScript滚动库,主要用于处理触摸...通过学习和实践`iscroll demo`,开发者能够掌握iscroll的使用,提升网页滚动体验,为用户提供更加流畅、自然的交互。

Global site tag (gtag.js) - Google Analytics