對于那些不需要路由的內部組件，在切換的時候希望增加一個輪播過渡的效果，效果如下：

創(chuàng)新互聯(lián)是一家專業(yè)提供漳縣企業(yè)網(wǎng)站建設,專注與網(wǎng)站制作、成都做網(wǎng)站、HTML5、小程序制作等業(yè)務。10年已為漳縣眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。

我們可以引入一個輪播組件，但是有個問題，通常輪播組件都會把所有的slide都渲染出來再進行切換，這樣就導致所有的資源都會觸發(fā)加載，這可能不是我們所期待的，畢竟如果slide比較多的情況需要一次性加載的圖片等資源太多了。所以我們可以手動簡單地寫一個，滿足需求即可。

現(xiàn)在一步步來實現(xiàn)這個功能，先寫一個實現(xiàn)基本切換的demo.

1. 實現(xiàn)切換

先用vue-cli搭建一個工程腳手架，使用以下命令：

npm install -g vue-cli
vue init webpack slide-demo # 運行后router等都選擇no

這樣就搭了一個webpack + vue的工程，進入slide-demo目錄，查看src/App.vue，這個文件是初始化工具提供的，是整個頁面的組件。還有一個src/components目錄，這個是放子組件的目錄。

在這個目錄里面新建3個組件：task-1.vue、task-2.vue、task-3.vue，然后在App.vue里面import進來，如下App.vue所示：

我們的數(shù)據(jù)格式questions是這樣的：

[{index: 1, type: 1, content: ''}, {index: 2, type: 1, content: ''},
{index: 3, type: 2, content: ''}, {index: 4, type: 3, content: ''}]

它是一個數(shù)組，數(shù)組里的每個元素代表每道題，每道題都有一個類型，如選擇題、填空題、判斷題等，分別對應上面的task-1、task-2、task-3，我們用一個currentIndex變量表示當前是在哪道題，初始化為0，如下代碼所示（添加到App.vue里面）：

  data() {
    return {
      currentIndex: 0
    };
  },
  created() {
    // 請求question數(shù)據(jù)
    this.questions = [
      {index: 1, type: 1, question: ''}, /*...*/];
  },

通過改變currentIndex的值，從而切到一下題即下一個組件，要怎么實現(xiàn)這個切換的效果呢？

可以使用Vue自定義的一個全局組件component，給合它的is屬性，達到動態(tài)改變組件的目的，如下代碼所示：

當currentIndex增加時，就會改變:is里面的值，依次從task-1變到task-2、task-3等，這樣component就會換成相應的task組件。

接著，再添加一個切換到下一題的按鈕，在這個按鈕的響應函數(shù)里面改變currentIndex的值。同時把question的數(shù)據(jù)傳給component：

響應函數(shù)nextQuestion實現(xiàn)如下：

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
        % this.questions.length;
  }
},

具體每個task的實現(xiàn)參考如task-1.vue示例：

最后的效果如下（加上題目內容）：

2. 添加輪播切換效果

輪播切換通常是把所有的slide都拼起來，拼成一張長長的橫圖，然后改變這個橫圖在顯示容器里面的位置，如老牌jQuery插件flipsnap.js，它是把所有的slide都float: left，形成一張長圖，然后 改變這張長圖的translate值，達到切換的目的。這個插件的缺點是沒有辦法從最后一張切回第一張，解決這個問題的方法之一是不斷地移動DOM：每次切的時候都把第一張移到最后一張的后面，這樣就實現(xiàn)了最后一張點下一張的時候回到第一張的目的，但是這樣移來移去地對性能消耗比較大，不是很優(yōu)雅。另外一個輪播插件jssor slider，它也是把所有的slide都渲染出來，然后每次切換的時候都 動態(tài)地計算每張slide的translate的值，而不是整體長圖的位置，這樣就不用移動DOM節(jié)點，相對較為優(yōu)雅。還有很多Vue的輪播插件的實現(xiàn)也是類似上面提到的方式。

不管怎么樣，上面的輪播模式都不太適用于我們的場景，其中一個是這種答題的場景不需要切回上一題，每道題做完就不能回去了，更重要的一個是我們 不希望一次性把所有的slide都渲染出來，這樣會導致每張幻燈片里的資源都觸發(fā)加載，就比如img標簽雖然你把它display: none了，但是只要它的src是一個正常的url，它就會請求加載。 由于slide往往會比較多，就不使用這種輪播插件了。

還可以使用Vue自帶的transition，但是transition的問題是，切下一個的時候，上一個不見了，因為被銷毀了，只有下一個的動畫，并且不能預加載下一個slide的資源。

所以我們手動實現(xiàn)一個。

我的想法是每次都準備兩個slide，第1個slide是當前展示用的，第2個slide拼在它的后面，準備切過來，當?shù)?個slide切過來之后，刪掉第1個slide，然后在第2個的后面再接第3個slide，不斷地重復這個過程。如果我們沒有使用Vue，而是自己增刪DOM，那么沒什么問題，可以很任性地自己發(fā)揮。 使用Vue可以怎么優(yōu)雅地實現(xiàn)這個功能呢？

在上面一個component的基礎上，再添加一個component，剛開始第1個component是當前展示的，而第2個component是拼在它右邊的，當?shù)?個切過去之后，就把第1個移到第2的后面，同時把內容改成第3個slide的內容，依此類推。使用Vue不太好動態(tài)地改DOM，但是可以 借助jssor slider的思想，不移動DOM，只是改變component的translate的值。

給其中一個component套一個next-task的類，具有這個類的組件就表示它是下一張要出現(xiàn)的，它需要translateX(100%)，如下代碼所示：

上面代碼把具有.next-task類的component隱藏了，這樣是做個優(yōu)化，因為display: none的元素只會構建DOM，不會進行l(wèi)ayout和render渲染。

所以就把問題轉換成怎么在這兩個component之間，切換next-task的類。一開始next-task是在第2個，當?shù)?個切過來之后，next-task變成加在第1個上面，這樣輪流交替。

進而，發(fā)現(xiàn)一個規(guī)律，如果currentIndex是偶數(shù)話，如o、2、4…，那么next-task是加在第2個component的，而如果currentIndex是奇數(shù)，則next-task是加在第1個component的。所以可以根據(jù)currentIndex的奇偶性切換。

如下代碼所示：