最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Vue實(shí)現(xiàn)內(nèi)部組件輪播切換效果

對(duì)于那些不需要路由的內(nèi)部組件，在切換的時(shí)候希望增加一個(gè)輪播過(guò)渡的效果，效果如下：

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元道縣做網(wǎng)站,已為上家服務(wù),為道縣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

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

現(xiàn)在一步步來(lái)實(shí)現(xiàn)這個(gè)功能，先寫一個(gè)實(shí)現(xiàn)基本切換的demo.

1. 實(shí)現(xiàn)切換

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

 
 
 
 
    
  
  
  
  
  1. npm install -g vue-cli
    2. 
  
  
  
  
  2. vue init webpack slide-demo # 運(yùn)行后router等都選擇no
    3.

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

在這個(gè)目錄里面新建3個(gè)組件：task-1.vue、task-2.vue、task-3.vue，然后在App.vue里面import進(jìn)來(lái)，如下App.vue所示：

 
 
 
 
    
  
  
  
  
    2.

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

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

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

 
 
 
 
    
  
  
  
  
  1. data() {
    2. 
  
  
  
  
  2.      return {
    3. 
  
  
  
  
  3.          currentIndex: 0
    4. 
  
  
  
  
  4.      };
    5. 
  
  
  
  
  5.  },
    6. 
  
  
  
  
  6.  created() {
    7. 
  
  
  
  
  7.      // 請(qǐng)求question數(shù)據(jù)
    8. 
  
  
  
  
  8.      this.questions = [
    9. 
  
  
  
  
  9.          {index: 1, type: 1, question: ''}, /*...*/];
    10. 
  
  
  
  
  10.  },
    11.

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

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

 
 
 
 
    
  
  
  
  
    2.

當(dāng)currentIndex增加時(shí)，就會(huì)改變:is里面的值，依次從task-1變到task-2、task-3等，這樣component就會(huì)換成相應(yīng)的task組件。

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

 
 
 
 
    
  
  
  
  
    2.

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

 
 
 
 
    
  
  
  
  
  1. methods: {
    2. 
  
  
  
  
  2.     nextQuestion() {
    3. 
  
  
  
  
  3.         this.currentIndex = (this.currentIndex + 1) 
    4. 
  
  
  
  
  4.                % this.questions.length;
    5. 
  
  
  
  
  5.     }
    6. 
  
  
  
  
  6. },
    7.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3.

***的效果如下（加上題目?jī)?nèi)容）：

2. 添加輪播切換效果

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

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

還可以使用Vue自帶的transition，但是transition的問(wèn)題是，切下一個(gè)的時(shí)候，上一個(gè)不見了，因?yàn)楸讳N毀了，只有下一個(gè)的動(dòng)畫，并且不能預(yù)加載下一個(gè)slide的資源。

所以我們手動(dòng)實(shí)現(xiàn)一個(gè)。

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

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
    4.

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

所以就把問(wèn)題轉(zhuǎn)換成怎么在這兩個(gè)component之間，切換next-task的類。一開始next-task是在第2個(gè)，當(dāng)?shù)?個(gè)切過(guò)來(lái)之后，next-task變成加在第1個(gè)上面，這樣輪流交替。

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

如下代碼所示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.