简单总结一下IONIC的滚动

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上多下点功夫。

转载于:https://my.oschina.net/M0m2loyG/blog/794787