鍍金池/ 問答/網(wǎng)絡安全  HTML/ 關于vue動畫，實現(xiàn)tab切換頁面時左右滑動效果

關于vue動畫，實現(xiàn)tab切換頁面時左右滑動效果

今天要想做一個類似于app切換效果的demo，既點擊

clipboard.png
這個時，獲取相應數(shù)據(jù)

clipboard.png

clipboard.png

動畫已經(jīng)加上了，但是不知道怎么才能進行切換
像進入詳情頁那個，已經(jīng)有辦法解決了，但是tab切換這個卻發(fā)現(xiàn)無從下手，哪位大神能給提供一下思路嗎，或者提供一個方案，demo都好，萬分感謝??！
不想使用插件的哦，只想用vue+vuex+vue-router+transition來實現(xiàn)

補充

clipboard.png

clipboard.png

clipboard.png

clipboard.png

是樣式寫少了還是什么原因呢，我感覺這樣好像就夠了

解決：
原來我路由配置的時候，每一個tab頁面引入的都是同一個文件，只要把列表頁封裝成一個組件，然后路由配置，不同主題列表引入不同的文件，即可解決

clipboard.png

回答
編輯回答
初心

寫了<router-view/>會配置路由么？
路由配置上就行了。
至于是左滑動還是右滑動，可以動態(tài)綁定name，注冊路由時meta中寫上索引

{
  path: '/supervise',
  name: 'supervise',
  component: Supervise,
  meta: { index: 2 }
},

在當前tab組件watch $route

watch: {
    $route(to, from) {
      if(to.meta.index < from.meta.index) {
        this.transitionName = "slide-forward"
      } else {
        this.transitionName = "slide-back"
      }
    }
}
2017年9月23日 02:13
編輯回答
蟲児飛

在父組件定義一個變量，子組件傳值狀態(tài)值到父組件。v-if判斷狀態(tài)，展現(xiàn)不同的組件就行了，非常簡單

2017年7月17日 18:29
編輯回答
悶油瓶

誰有demo ??

2018年9月9日 18:40