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