ionic的滚动有两种方案:基于ionic框架本身实现的scroll( 有点类似于iscroll ,都是模拟滚动 , 但是性能相差巨大 , iscroll的性能接近于原生滚动了);基于webview原生的滚动。
用法
在ionic中应用ionic实现的scroll,可以使用如下两个标签ion-content , ion-scroll做载体
如需要使用原生滚动,在ion-content 标签上加上 overflow-scroll="true"标签或在app.js文件中加上$ionicConfigProvider.scrolling.jsScrolling(false);
基于不同场景对滚动方案的选择
以下所有讨论都基于Android , 你懂得
从几个方面做下参考
1.整个页面内容不多(不存在下一页、 下一页、 下一页 ...), 应该使用原生滚动 , 体验很好。
2.如果你需要对滚动进行监听并绑定相应的事件 , ionic本身的scroll是个比较好的解决方案 , 它已经有相关的实现并给出接口了。
3.如果页面中对滚动场景的应用多样化(横的竖的都来且不止一处) , 美团外卖那样 , 分类滚动,菜品滚动 , 建议使用基于IONIC本身实现的scroll ,为什么说建议 , 这个要根据实际情况去做测试 , 原生滚动的一个死角就是一旦数据过多 , 滚动性能不会影响太多 , 但是切换页面的速度会慢的吓人 , angular的数据双向绑定是基于$watch监听 , 没有被隐藏(remove , display:none)的元素、数据都在监听之中 , 我做过一个测试 , 一个纯文本列表 , 大概到七八十条数据时 , 切换页面需要接近两秒 , 当时测试用手机是华为C8818。
4.重点来了,在数据较多(双向绑定的变量数据也多) 的场景下 , 怎么优化? ionic提供了相应的优化办法,即collection-repeat,原理是只显示能见范围内的内容,能见范围外的内容自动隐藏(同时也关掉了这些内容的$watch监听), 所以获得了一个比较好的滚动和页面切换性能 , 数据的多少对性能影响微乎其微 , 但是滚动性能和体验与原生相差甚远。
最后拎一下 , ionic本身对性能、速度的优化做了很多工作 , 但是有些场景下你依然觉得性能速度很坑 , 比如滚动、页面切换 ,其实不能怪罪于IONIC , 它只能尽力优化但并不能超越, 毕竟, 它局限于一个前端UI框架并且依赖angular js 和操作系统本身的webview , 如果有意改善并优化你的ionic应用 , 你应该在angular js 和 webview上多下点功夫。