前言

前段時間呢實現(xiàn)了一個模仿移動端app的通過滑動來切換路由/tab的效果，詳見vuejs實現(xiàn)spa頁面組件滑動特效。完了之后呢就在想能不能做成一個組件的形式，改進一下，抽離出來，順便再發(fā)布到npm上，不是美滋滋？這兩天正好有時間，就把它寫出來了，我給他起名叫tab-slider，中間遇到一些坑，分享一蛤。

正文

簡單介紹

正如我上一篇文章所說，如果你需要這種功能

即將離開的組件和將要進入的組合需要同時出現(xiàn)在頁面中

用手指拖動頁面可以切換路由，而不僅僅是點擊鏈接跳轉(zhuǎn)

結(jié)合以上兩點，拖動過程中同時顯示兩個組件，手指離開屏幕后執(zhí)行切換路由或者返回的動作

tab-slider也許可以滿足你，具體實現(xiàn)思路可以去看上一篇文章，這里就不講了，來看一下效果圖：

改進方面

• 相比之前每個路由組件都要寫touch事件的蠢寫法，我把touch事件寫在了router-view上，增強了代碼的復用，事實上不這么改我也沒法將組件抽離出來給別人用
• 支持多個tab切換，之前是只有2個，寫法固定，現(xiàn)在可以有任意個tab切換。

踩過的坑

在我開發(fā)XiXi這個仿DiDi app項目的時，我使用的Vue版本是2.4.4，而我寫tab-slider的時候使用了最新版本的Vue 2.5.16。寫完之后我遇到了一個問題，滑動完畢切換路由的時候，router-view所對應的區(qū)域會閃一下，而通過點擊router-link切換路由則不會。
Vue2.5.16效果圖：

where？哪有問題？

這里一開始我覺得可能是新老項目css樣式做了部分更改，影響了瀏覽器的重繪或是回流，苦苦搜尋無果。后來通過chrome控制臺的的performance發(fā)現(xiàn)：新版本的vue多了個flushCallbacks的activity,耗時9ms。這是什么？繼續(xù)google，沒什么有用的東西，ok沒關系，去Vue倉庫里搜，發(fā)現(xiàn)他第一次寫入是在14 Oct 2017，也就是Vue2.5.2發(fā)布的時候，這個版本修改了nextTick實現(xiàn)機制，并關閉了一個issue，有興趣的同學可以看看。這個issue下面呢又有人reference了這個issue，里面正好講解了相關內(nèi)容。開源社區(qū)簡直棒極了！

why？問題是什么？

簡單來說呢就是新版Vue對于DOM相關事件是放在macro task里，其他情況默認走micro task，而micro task要先于macro task執(zhí)行。而我項目中的寫法是，對拖曳的dom監(jiān)聽了transitionend事件，當transition結(jié)束后進行路由切換。所以原因應該是滑動結(jié)束后（也就是transition結(jié)束），路由沒有在第一時間進行跳轉(zhuǎn)，所以出現(xiàn)了一瞬間的“白屏”，在我們看來就是閃了一下。

how？怎么解決？

• solution1: 使用低版本Vue，2.4.4及以下。
• solution2: 修改寫法，直接使用settimeout，延遲時間與動畫時間一致，而由于js的異步機制，實際延遲時間總是略大于寫入的延遲時間，基本上能達到想要的效果。

這里我采用了solution2，畢竟是寫出來給人用了，總要有個通用的解決方案。

另外個坑就是在發(fā)布到npm之后，引入我的包，沒法正常使用，提示組件未注冊，折騰了許久，參考了vant和cube-ui的組件導出方式，卻一直沒能成功導出正確的對象。最后發(fā)現(xiàn)原因在于webpack的配置上： 需要在output屬性中添加library以及l(fā)ibraryTarget，這樣才能正確導出對象。

怎么用

說了那么多廢話，這組件怎么用？

• 安裝：npm i -S tab-slider
• 在main.js中引入樣式,import 'tab-slider/dist/index.css'
• 在需要的組件中注冊子組件,import TabSlider from 'tab-slider',也可以在main.js中引入，并通過Vue.use()來使之成為一個全局組件。
• 接受一個comp的prop，類型是數(shù)組，數(shù)組中的每一項是對象，對象中又包含了name和component屬性。其中name屬性必須和路由名字相同，(這也意味著你必須為每個路由取名)，component則是對應的組件。這里要注意一下，comp中每一項的順序需要與你的router-link順序一一對應。
• 還接受一個default-index，表示默認跳轉(zhuǎn)的路由，從0開始。

可以改進的地方

• webpack相關配置還是通過vue-cli生成的，刪除了一些不必要的東西，但還是沒有做到最簡。打包出來的東西也有9kb，好像有點大的過分。
• 可以把router-link的內(nèi)容也直接做進去，畢竟tab和內(nèi)容區(qū)是緊密聯(lián)系的。
• 提供更多的選項(prop)給使用者。

么得了

如果對你有幫助的話點個贊點個收藏點個star提個issue都是可以的哦 倉庫地址

總結(jié)

以上是生活随笔為你收集整理的Vue实现的滑动切换路由组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。