推薦一個(gè)基于Vue的滾動(dòng)條-Vuescroll
GitHub地址：vuescroll
靈感來源
以前接觸過一個(gè)后端管理系統(tǒng)命浴， 叫H+辖众， 偶爾發(fā)現(xiàn)它用的是左側(cè)菜單沒有滾動(dòng)條嘁傀， 于是楞件， 我仔細(xì)查看dom衫生， 發(fā)現(xiàn)H+ 左側(cè)菜單的旁邊有一個(gè)小的DIV， 我拖動(dòng)的土浸， 菜單竟然也能滾動(dòng)罪针， 我明白了， 這是用的虛擬滾動(dòng)條黄伊， 我感覺這個(gè)挺不錯(cuò)的泪酱， 后來查看這個(gè)虛擬滾動(dòng)條的源碼， 發(fā)現(xiàn)是一個(gè)款叫做SlimScroll的基于jquery的庫还最。由于我對(duì)Vue比較熟悉墓阀，所以，我想用Vue做一個(gè)類似的拓轻。
不斷踩坑
一開始用slimScroll的方法并不理想斯撮， slimscroll的滾動(dòng)內(nèi)容的方法是：
- 監(jiān)聽滾輪事件，根據(jù)滾動(dòng)每次滾動(dòng)的距離扶叉，然后計(jì)算內(nèi)容滑動(dòng)的距離勿锅。
- 監(jiān)聽拖動(dòng)滾動(dòng)把手的事件，通過拖動(dòng)滾動(dòng)把手的距離來滑動(dòng)內(nèi)容的距離枣氧。
這有個(gè)2致命的缺點(diǎn)：
- 不能平滑的滾動(dòng)溢十， 什么叫不能平滑地滾動(dòng)？ 就是滾動(dòng)到目標(biāo)的點(diǎn)沒有一個(gè)過度的效果达吞， 一下子就突然到目的地了张弛。
- 在手機(jī)端上的時(shí)候， 當(dāng)手指滑動(dòng)離開滾動(dòng)內(nèi)容的時(shí)候， 內(nèi)容不能繼續(xù)滾動(dòng)乌庶！
這兩點(diǎn)帶來了極差的UI體驗(yàn)种蝶！
后來， 我無意中發(fā)現(xiàn)了element-ui也是使用了虛擬滾動(dòng)條瞒大， 并且效果很好螃征， 尤其是在手機(jī)端滑動(dòng)， 每次滑動(dòng)結(jié)束手離開屏幕都能繼續(xù)滑行一段距離透敌， 比slimscroll效果要好盯滚，于是我就去element-ui的github上翻scrollbar的源碼， 通過閱讀源碼酗电， 我發(fā)現(xiàn)element-ui觸發(fā)滾動(dòng)的時(shí)機(jī)是在onscroll的時(shí)候魄藕， 也就是說， 把滾動(dòng)內(nèi)容的父元素設(shè)置為overflow:scroll撵术， 然后監(jiān)聽父元素的onScroll事件背率， 在onScroll事件的callback里面移動(dòng)滾動(dòng)內(nèi)容即可。 經(jīng)過我的一番改進(jìn)嫩与， 終于能做到和element-ui滾動(dòng)條滾動(dòng)的一個(gè)效果了寝姿。
滾動(dòng)條升級(jí)
后來，我又接觸到了幾個(gè)不錯(cuò)的划滋， 并把它們的特點(diǎn)加進(jìn)來了饵筑。 如element-resize-detector, scroller, smooth-scroll， bertter-scroll等等处坪。 現(xiàn)在的Vuescroll已經(jīng)升級(jí)為一個(gè)功能強(qiáng)大的滾動(dòng)條了根资。
它的基本特點(diǎn)有：
- 為Vue量身打造，擁有Vue響應(yīng)式的特點(diǎn)同窘。
- 可以通過選擇不同的模式來運(yùn)行在PC端或者手機(jī)上:
-
native模式: 類似于原生的滾動(dòng)條玄帕，但是可以自定義滾動(dòng)條樣式，使用于PC端用戶塞椎。 -
slide模式: 允許你用手指或鼠標(biāo)滑動(dòng)內(nèi)容桨仿， 可以滑動(dòng)超出邊界范圍睛低，適用于移動(dòng)端端用戶案狠。 -
pure-native模式: 滾動(dòng)條使用原生的滾動(dòng)條，適用于喜歡原生滾動(dòng)條的用戶钱雷。
-
- 檢測滾動(dòng)內(nèi)容發(fā)生尺寸變化并自動(dòng)更新滾動(dòng)條骂铁。
- 通過使用 不同的滾動(dòng)動(dòng)畫來平滑滾動(dòng)。
- 下拉-刷新 (拉倒頂部并拉出邊界開始刷新列表)
- 上推-加載 (推到底部并且退出邊界開始加載列表)
- 能夠放大或者縮小滾動(dòng)的內(nèi)容.
- 分頁 (每次滑動(dòng)整個(gè)頁面)
- 截?cái)?(每次滑動(dòng)一個(gè)用戶定義的距離)
- 能夠禁止X或Y方向上的滾動(dòng)罩抗。
- 能夠設(shè)置滾動(dòng)條是否保持顯示拉庵。
- 能夠設(shè)置滾動(dòng)條，軌道的顏色和透明度套蒂。
- 能夠設(shè)置滾動(dòng)條钞支，軌道的位置茫蛹。
- 能夠自定義內(nèi)容的標(biāo)簽 (也就是說你能夠設(shè)置內(nèi)容的標(biāo)簽為一個(gè)組件)
總的來說，Vuescroll不僅僅只一個(gè)滾動(dòng)條烁挟， 你可以用它制作一個(gè)輪播圖婴洼、時(shí)間選擇器、能夠自動(dòng)偵測內(nèi)容發(fā)生變化的一個(gè)插件等等撼嗓。
部分參考資料
