web app 无限加载终极解决方案

• 该项目 是一个演示了 web app 各大【scroll view】主流插件的用法，主要面向 vue 项目开发者，使用 vux 做为项目骨架，scroll view 采用图文的方式进行布局，能够无限加载数据，用于测试各大插件在滑动的过程当中是否卡顿，滑动效果是否天然，比较了8种较为主流的 scroll view 插件（具体见插件比较），并对 mescroll 进行了源代码上的封装，对 better-scroll 进行了使用上的封装。

1.扫码快速体验（使用手机浏览器打开）

2.安装与运行

  npm install
  npm run dev
复制代码

3.项目打包

  npm run build
复制代码

4.演示部分界面截图（4种，其余插件效果安装体验）

5.插件比较

scroll view 8款插件比较
插件名称	GitHub	说明
vux	https://github.com/airyland/vux	基于 vue 与 weui 移动端组件库，但该 scroller 组件官方称已经再也不维护，建议使用第三方插件。优势：不管 Android 仍是 iOS，scroll view 均可以产生回弹效果，缺点：滑动卡顿、不天然，局限于 vux 框架之中
better-scroll	https://github.com/ustbhuangyi/better-scroll	算是 GitHub 上 star 最多的插件了，不少项目在使用，详细介绍见官网。优势：做者更新频繁，很是上心（上次我凌晨2点多提了个issue，十分钟以后就回复了），使用者较多，功能也很是丰富，具备有回弹效果，纯文字列表滑动也比较天然。缺点：官方文档较为简陋（仅仅是一些参数的介绍），基于vue的demo对初学者来讲难度稍大，图文列表滑动不太天然，且加载的数据越多越为明显，尤为是在低端安卓机或iPhone5/6上滑动过程当中会跳跃式的回闪
vue-scroller	https://github.com/wangdahoo/vue-scroller	基于 Vue 的 滑动插件，支持下拉刷新和上拉加载，支持自定义下拉刷新/上拉加载/无数据 dom 等。优势：具备有回弹效果，使用简单，官方demo齐，上手较为简单。缺点：图文列表，当数据加载到必定程度后会比较卡顿；使用上仅限于vue
mescroll	https://github.com/mescroll/mescroll	精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器，定制化很是高，默认UI很精致。优势：文档齐全，官方例子很是多，很是容易使用，具备回到顶部等贴心功能。缺点：无回弹效果，在iOS上使用下拉刷新会与iOS浏览器默认回弹效果冲突
vue-infinite-scroll	https://github.com/ElemeFE/vue-infinite-scroll	饿了么出品，封装成 vue 指令，代码简洁，可是功能较为简单。优势：可对源代码进行定制化开发。缺点：功能很是简单，仅支持无限加载，且不能定制化dom
vue-infinite-loading	https://github.com/PeachScript/vue-infinite-loading	功能和 vue-infinite-scroll 相似，仅支持无限加载，可是以组件方式进行封装。优势：代码简明易懂，有官方示例，文档齐全，支持横向scroll。缺点：功能简单，不支持下拉刷新，仅限于vue
VueMugenScroll	https://github.com/egoist/vue-mugen-scroll	一款无限加载插件，使用上也比较简单。优势：参数较少，新手比较容易上手。缺点：功能单一，不支持下拉刷新，仅限于vue
Scrollload	https://github.com/fa-ge/Scrollload	一款下拉刷新，上拉加载的移动端插件，无任何依赖，对iOS局部滚动的坑进行了较为全面的分析。优势：示例丰富，对iOS回弹效果和项目回弹效果的冲突提出了较为全面的解决方案。缺点：对vue的支持不是很友好，解决局部滚动问题会依赖于其余库

6.总结

• 1.scroll view 插件很是多，但实现方式无非是两种

  • 1-1.本身使用 css3 transform 来实现滚动动画，能够很好的实现回弹效果，但很难掌控，因此会形成滑动不天然，上述插件vux、better-scroll、vue-scroller都是使用的该方案
  • 1-2.使用原生div效果（overflow-y:auto）来实现滑动，滑动效果会较为天然，但安卓上无回弹效果，且滑动事件易于iOS默认滑动事件冲突，上述插件其他5种使用的该方案。

• 2.better-scroll 官方demo相对新手来讲较为复杂，vue-scroll-mobile-demo 中对 better-scroll 进行了使用上的封装（基于vue）

• 3.mescroll 在 vue 中使用存在一些弊端（如组件在deactivated时未注销滑动事件，在deactivated时未销毁回到顶部图片），vue-scroll-mobile-demo 对 mescroll 的源代码进行了相应的完善。

• 4.我的观点：项目中 scroll view 为文字列表且滚动加载数据较少时，可以使用 better-scroll，毕竟滴滴也在用，使用者不少。项目中 scroll view 为图文列表时，且须要无限加载数据时使用 mescroll，可参照官方示例。

7.项目连接

• vue-scroll-mobile-demo