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

Iscroll4使用心得

阅读更多

转自:http://www.mansonchor.com/blog/blog_detail_64.html

最近做web app项目做到心血来潮,有太多经验想记录,太多细节想分享。今日把使用iscroll4 一直困扰了很久的问题研究解决了,很高兴决定把使用的心得写出来,方便大家参考,不要再走太多的弯路。

iscroll4 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,虽然插件不大但是效果十分好。是web app开发必备的控件之一。

iscroll4官网 : http://cubiq.org/iscroll-4

 

为什么要用iscroll4

因为在IOS5之前,web webkit是不支持一种原生方法去滚动固定 长/宽 容器里的内容的。简单的说,就是css属性 overflow:scroll在IOS5 之前是不生效的。

这就像兼容万恶的IE6一样,作者希望通过写一个控件,让所有web浏览器支持这种滚动,于是iscroll4应运而生。

在解决了兼容性的问题之外,它还提供了需求许多交互的解决方案,如:

1.双指放大缩小操作

2.下拉刷新/上拉加载更多

3.逐个元素定位的滚动列表

 

使用iscroll4可能会遇到的问题

1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应

这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是,在iscroll4源码里面找到这一行

1
onBeforeScrollStart: function (e) { e.preventDefault(); }

然后把它改成

1
onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }

这样只要你touch的元素是 select || option || input || textarea时,它就不会执行e.preventDefault(),默认的事件就不会被屏蔽了。

 

如果你有其他不想被屏蔽的元素,可以自己修改,不过需要注意onBeforeScrollStart里的屏蔽默认事件很重要,它是iscroll进行流畅滚动的基础,不要随便的把它去掉,否则你会发现滚动起来很卡顿。

2.往iscroll容器内添加内容时,容器闪动的bug

我在做上拉加载更多内容的时候,肯定需要把新的内容插入到容器内,这时发现有时容器会出现闪动,一开始认为是insert进去的内容太多,后来又觉得是不是因为里面布局用了float的原因导致重新渲染,最后通通排除。

其实病灶在于iscroll使用了太为先进的CSS3属性,可能web webkit对这些属性的支持力度还是不够好。

涉及的两个属性是  translate3d 和 TransitionTimingFunction,或许是这两个属性在列表长度改变时会影响到渲染,所以导致页面闪动,解决办法就是找到源代码的

1
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改成

1
has3d = false

和在配置iscroll时,useTransition设置成false就可以了(useTransition默认是false的)。

 

这样做有一点瑕疵就是滚动起来和原来比没那么流畅了(原来的效果真的是可以媲美原生app的),但是假如你不对比的话,是看不出来了。

在效果和体验上面选择,我更看重体验。

不够如果你符合下面的条件,我还是不建议你修改成我这样

1)即使你不修改,无论你怎么往iscroll容器里面插内容,它都不会闪动,这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片,很多时候会出现闪动bug

2)如果你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟,但是在手机上的safari完全没有问题,所以如果你不是用phonegap之类的框架开发混合app,你不需要担心这个问题。

3)只针对android,因为android的webkit暂时还不支持translate3d,iscroll会自动选择不用。

3.过长的滚动内容,导致卡顿和app直接闪退

说白了iscroll都是用js+css3实现的,对浏览器的消耗肯定是可观的,避免无限制的内容加载本身就是web产品应该避免的。

假如无可避免,我们可以尽量减低iscroll对浏览器内存的消耗

1)不要使用checkDOMChanges。虽然checkDOMChanges很方便,定时检测容器长度是否变化来refresh,但这也意味着你要消耗一个Interval的内存空间

2)隐藏iscroll滚动条,配置时设置hScrollbar和vScrollbar为false。

3)不得已的情况下,去掉各种效果,momentum、useTransform、useTransition都设置为false

4.左右滚动时,不能正确响应正文上下拉动

在做这种效果时 ,假如这个幻灯片模块只是你页面的一部分,你还需要上下拉动页面去浏览其它内容时,你的手指在这个模块上做上下拨动时,恐怕会没有反应。原因还是和问题1一样的,因为屏蔽了默认事件。

完美的解决方法是没有的,如果把 e.preventDefault() 去掉,幻灯片的滚动效果就会大打折扣,而且有时用户上下拨动的操作会被误操作成幻灯片的滚动。所以在效果还是体验上,大家还是自己选择吧。在技术上解决不了的问题,我认为还是多和产品和UI沟通比较好,共同协商一个良好的方案。

基本的心得就是这些拉,希望对大家有帮助

分享到:
评论

相关推荐

    iscroll4

    iscroll4是iscroll的一个早期版本,虽然可能没有最新版的功能丰富,但依然在许多项目中被广泛使用。 iscroll4的核心特性包括: 1. **高性能滚动**:iscroll4通过高效的事件处理和动画更新,确保在各种设备上的滚动...

    iscroll4.js

    iscroll4.js不仅提升了用户体验,还包含了上拉刷新和下拉加载更多的功能,这对于内容分页和实时更新的应用场景尤为重要。 在HTML5页面中,iscroll4.js的核心功能在于处理滚动事件。通过监听用户的滑动操作,iscroll...

    iScroll4框架

    iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一个限定了高度和宽度的...

    iscroll4例子

    **iscroll4详解** iscroll4是一款轻量级的...理解并熟练掌握iscroll4的使用方法和技巧,对于开发高效、流畅的移动端页面具有重要意义。通过不断的实践和优化,开发者能够充分发挥iscroll4的功能,打造优质的用户体验。

    原生 iscroll-4

    1. **高性能**:iScroll-4 使用硬件加速,能够处理大量的DOM元素,提供流畅的滚动效果。 2. **多平台支持**:适用于各种浏览器和移动设备,包括iOS、Android、Windows Phone等。 3. **可定制性**:支持多种配置选项...

    H5使用iscroll-4模拟手机app下拉刷新功能实现demo

    下面我们将深入探讨如何使用`iscroll-4`在`H5`页面中实现这一功能。 `iscroll-4`是由Matteo Spinelli开发的一个轻量级JavaScript库,专门用于处理触摸设备上的滚动事件。它提供了平滑的滚动效果,支持多种手势,...

    iscroll-4.rar

    iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE...

    iscroll-4 滚动内容

    首先,你需要将iscroll-4库引入到项目中,可以通过下载压缩包或者使用npm来获取。引入后,在需要实现滚动效果的元素上使用iscroll,一般步骤如下: ```html <!-- 滚动内容 --> <script src="path/to/...

    iScroll 4.2.5 中文API

    1. **初始化**:需要对想要滚动的元素进行初始化,iScroll不限制一个页面中使用该库的元素数量。然而,滚动元素中内容的类型和长度会影响到可以同时滚动的元素数量。 2. **DOM结构**:为了获得最佳性能,DOM树应尽...

    iscroll.js下载 5.1.3最新版本

    4. **控制iscroll**:通过iscroll实例的方法,如`scrollTo`、`refresh`等,你可以手动控制滚动位置或刷新iscroll的状态。 iscroll的优点包括: - **高性能**:iscroll采用硬件加速技术,确保在各种设备上都能流畅...

    iscroll5 refresh 及iscroll4刷新功能

    本文将重点讲解iscroll5的刷新功能及其与iscroll4的区别。 **一、iscroll5的刷新功能(pull-to-refresh)** 1. **基本概念**:Pull-to-refresh,即“下拉刷新”,是移动应用中常见的一种交互模式,用户通过在内容...

    iScroll滑动插件的使用示例

    4. **事件监听**:iScroll提供了一系列的事件,如`scrollStart`、`scroll`、`scrollEnd`等,可以监听用户的滚动行为,从而实现更丰富的交互。例如,可以在`scrollEnd`事件中处理用户滚动停止时的逻辑。 5. **性能...

    iScroll下拉刷新上滑加载

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

    iscroll5上拉下拉实例完整demo

    iscroll5相较于之前的iscroll4版本,引入了许多改进和新特性。例如,性能优化,支持更复杂的布局(如嵌套滚动),提供了更丰富的API接口,以及更好的触摸事件处理。在这个实例中,我们可以看到如何将这些特性应用到...

    基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo

    这个项目的核心在于iscroll4库,它是一个轻量级的JavaScript库,专门用于处理高性能的滚动效果。 iscroll4是由Matteo Spinelli开发的,它提供了一个优雅的方式来处理触摸和鼠标滚动事件,尤其是在那些浏览器原生...

    html iscroll demo.rar

    4. **监听事件**:iscroll提供了一系列的事件,如`scrollStart`、`scroll`、`scrollEnd`等,你可以根据需要绑定这些事件来执行相应的操作。 5. **更新内容**:如果滚动内容动态改变,比如通过Ajax加载新数据,需要...

    iScroll4 pull to refresh 学习

    在这个教程中,我们将深入学习如何使用iScroll4库实现这一功能。 iScroll4是一款轻量级且功能强大的JavaScript滚动插件,由Matteo Spinelli开发。它提供了平滑的滚动效果,并支持触摸设备。在本文中,我们将探讨...

    iscroll插件

    4. **实时刷新iscroll**:在数据加载完成后,使用`myScroll.refresh()`方法更新iscroll的状态。 iscroll作为一个强大的滚动解决方案,不仅简化了移动设备上滚动效果的实现,还为开发者提供了丰富的定制化选项和事件...

Global site tag (gtag.js) - Google Analytics