先上圖：
如果想要點選tab切換頁面内容，或者活動頁面切換tab，很多ui元件可以做到。今天我要探讨是如何做到像微信那樣的滑動切換tab，既能左右滑動切換，又能上下滑動一個頁面而不影響其他頁面的滾動位置。如果用ui元件的話，子頁面都是在一個div裡面的，雖然可以做到左右滑動，但是隻要有一個頁面上下滾動，所有頁面也會滾動到同樣的高度。浏覽了相關的部落格或GitHub上面做的插件。大概思路是：子頁面是在一個裡面切換，他們有各自的路由，像一個單獨的頁面一樣。是以各自的滾動高度應該是不受影響的。接下來，如何讓不同route發生切換效果，vue官網介紹可以有過渡效果，用transition。頁面滑動切換用的是vue-touch，這是比較簡單的滑動切換元件了。讓頁面滾動一段距離左右滑動頁面後回來原來頁面，還是保持已滾動的高度，用keep-alive。大概思路就是這樣，我的demo放在了GitHub上面：https://github.com/520zzj/router-swipe，這是一個vue左右滑動切換tab的demo，demo是完整的，download下去就可以用，如果報錯，先 npm install一下先，在運作。過渡效果不好，還有keep-alive使用有問題，導緻做不出緩存效果，希望有路過的大神指點一二。圖中，前面點選的是tab切換頁面内容，後面是滑動内容切換tab，做的粗糙，希望有大神幫忙優化一下。