移动端构建可滑动区块
YIXUNFE opened this issue · comments
移动端构建可滑动区块
在移动设备中,页面中元素的滑动一直是一个困扰人的问题。PC上一个简简单单的overflow: auto
便能解决的事情,在移动端却需要各种“花式”解法。
这里我们先简单罗列一下JS和CSS常见解法。
使用iScroll来模拟滑动
iScroll是一款强大的用于移动端滑动效果的插件,很多移动端应用都会用到它来制作滑动效果。它除了具有实现滑动中的回弹、势能、吸附边界、滚动条等效果外,还有实现slide的能力,放大缩小,无限滚动,键盘绑定,滚轮控制等额外功能。iScroll为了使滑动效果更加流畅,会阻止实例化对象中的元素节点上的click事件的默认行为和冒泡,再动态的生成事件对象,触发事件。这种追求完美的解决方案也是令人生畏的地方。抛开一些安卓机型无法阻止默认事件的例外(遇到了也挺烦人的),iScroll的体积也更适合在混合应用中引用,在流量问题凸显的移动端,似乎我们需要的是一款轻巧的产品。
在iOS中,iScroll表现相当不错,但在安卓机下流畅度一般,主要是因为安卓机在CSS3 transition中使用贝塞尔曲线做扭曲函数表现不佳。
使用overflow:auto达到原生滑动
在移动端的网页中,实现滑动效果变得不再那么困难是在安卓3.x版本也开始支持overflow:auto
后,在安卓2.3以及更老版本中,网页对待overflow:auto
和overflow:hidden
是一样的。而在iOS中,overflow:auto
的表现也不理想,一旦手指离开屏幕,滑动元素就不再有任何动作,既没有回弹效果,也没有“惯性”动画效果。只有当我们加上-webkit-overflow-scrolling: touch
之后,滑动效果就变得和原生的一样了(iOS下存在不能吸附边界的小遗憾)。
需要注意的是:
- iOS中多个
overflow:auto
滑块嵌套有严重BUG,测试地址。 - 安卓下滑块没有回弹效果,比较生涩。
虽然使用CSS方式能够使我们简洁高效的开发出一个滑动效果,但是考虑到为了使网页效果更具普遍性、通用性以及能够满足我们更多的交互,我们仍有必要开发一款轻巧的滑动插件以满足我们一些小小的愿望(比如安卓中的回弹效果,iOS下解决吸附边界问题等)。
认识NiceScroller
NiceScroller是一款体积轻巧(gzip开启时2.1K),功能齐全的插件,能够满足我们对滑动效果的需求。
NiceScroller支持的功能:
- 边界回弹;
- 自动判断滑动方向;
- 势能处理;
- 多滑块嵌套;
- 多种回调事件。
NiceScroller插件的优势是比较明显的,这里介绍一些实现原理:
拖拽处理
在网页中实现拖拽的原理,简述就是在touchstart时记录原点,touchmove时记录当前点,处理元素位移。NiceScroller的拖拽处理也是如此处理:
- 对滑动块绑定touchstart事件,找到当前激活的滑动块;
- document上绑定touchmove,touchend事件;
- touchmove时记录当前点,并移动激活中的滑动块;
- touchend时开始处理势能并重置激活的滑动块为null;
多插件嵌套的功能主要依靠激活滑动块这个过程,获取多个滑动块中最符合实际的一个进行滑动处理即可。
额外需要说明的是,即使实例化了多个NiceScroller对象,document上也仅仅绑定一次事件,在所有滑动块都销毁后将解除绑定。
势能
开启势能配置项的情况下,NiceScroller会模拟原生滚动,实现带有“惯性”的滑动效果。该算法是摘自iScroll中的一个算法,测试下来效果不错。
回调
目前NiceScroller提供了三种回调,分别是触摸开始时的回调,触摸离开时的回调,滑动结束时的回调。
使用体验
在实例化滑块之前,coder可能需要手动的设置一下滑动内容的高宽大小,因为默认情况下子元素可能会换行处理。
NiceScroller以其小巧成为了我们易迅网M站选用的插件,在商详晒单评论中,你将会领略到它的风采。
目前已经支持IE的手势事件,并设置了方向判定。