基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖

更新時(shí)間：2017年11月27日 09:35:58 作者：qwezxc24680

這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

因?yàn)橹耙恢痹诿镜捻?xiàng)目，vue這塊就生疏了不少，正好借這個(gè)小demo復(fù)習(xí)下vue的知識(shí)。

先來(lái)個(gè)效果圖：

如圖所示，實(shí)現(xiàn)的就是一個(gè)間隔2.5s自動(dòng)向左切換下一張的輪播圖，同時(shí)鼠標(biāo)移入停止輪播，移出回復(fù)輪播；
而下方按鈕會(huì)根據(jù)當(dāng)前圖片自動(dòng)變紅且可以手動(dòng)控制當(dāng)前圖片。

思路：

整個(gè)demo分為輪播圖片和控制span兩個(gè)部分。
按照前端工程化的需求來(lái)說(shuō)，這兩個(gè)部分應(yīng)該解耦成兩個(gè)component最后再導(dǎo)入頁(yè)面比較合理，但由于demo較為簡(jiǎn)單，
作為練手就不搞那么復(fù)雜了，對(duì)項(xiàng)目有追求【強(qiáng)迫癥】的童鞋可以往組件化的目標(biāo)靠，具體方法參考我之前的博文。

第一步，先寫(xiě)出整體框架：

<template> 
 <div class="slide"> 
  <div class="slideshow"> 
   <ul> 
    <li v-for="(img, index) in imgArray" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
   </ul> 
  </div> 
  <div class="bar"> 
   <span v-for="(item, index) in imgArray" :key="index"></span> 
  </div> 
 </div> 
</template>

我們使用v-for列表渲染兩個(gè)部分，值得注意的是列表渲染最好要提供一個(gè)key值，至于為什么官方文檔說(shuō)得很復(fù)雜，
就我所知的是如果不加key值在使用transition-group也就是過(guò)渡效果的時(shí)候會(huì)出現(xiàn)bug，官方給出的建議也是盡可能
在列表渲染的時(shí)候加上key值，百利無(wú)一害，養(yǎng)成習(xí)慣就好。

第二步：

在上一步我們渲染的是一個(gè)img數(shù)組，具體：

data () { 
  return { 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }

然后實(shí)現(xiàn)輪播的原理就是創(chuàng)建一個(gè)變量與當(dāng)前遍歷的index值比對(duì)，若相同則顯示，否則隱藏；
同時(shí)下方按鈕index若也與變量相同則當(dāng)前按鈕變?yōu)榛钴S狀態(tài)即背景變紅。

<template> 
 <div class="slide"> 
  <div class="slideshow"> 
   <ul> 
    <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
   </ul> 
  </div> 
  <div class="bar"> 
   <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span> 
  </div> 
 </div> 
</template>

第三步：

創(chuàng)建定時(shí)器，每隔2.5s給變量mark+1，掛載到鉤子函數(shù)created：

export default { 
 data () { 
  return { 
   mark: 0, //比對(duì)圖片索引的變量 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }, 
 methods: { 
  autoPlay () { 
   this.mark++; 
   if (this.mark === 4) { //當(dāng)遍歷到最后一張圖片置零 
    this.mark = 0 
   } 
  }, 
  play () { 
   setInterval(this.autoPlay, 2500) 
  }, 
  change (i) { 
   this.mark = i 
  } 
 }, 
 created () { 
  this.play() 
 } 
} 
</script>

第四步：

加上css文件，出現(xiàn)基本的效果。

<style> 
 * { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
 } 
 .slide { 
  width: 1024px; 
  height: 320px; 
  margin: 0 auto; 
  margin-top: 50px; 
  overflow: hidden; 
  position: relative; 
 } 
 .slideshow { 
  width: 1024px; 
  height: 320px; 
 } 
 li { 
  position: absolute; 
 } 
 img { 
  width: 1024px; 
  height: 320px; 
 } 
 .bar { 
  position: absolute; 
  width: 100%; 
  bottom: 10px; 
  margin: 0 auto; 
  z-index: 10; 
  text-align: center; 
 } 
 .bar span { 
  width: 20px; 
  height: 5px; 
  border: 1px solid; 
  background: white; 
  display: inline-block; 
  margin-right: 10px; 
 } 
 .active { 
  background: red !important; 
 } 
</style>

第五步：

現(xiàn)在我們得到的效果還是每隔一段時(shí)間圖片突然變成另外一張，用戶體驗(yàn)很差，達(dá)不到輪播的效果。
所以我們得加上過(guò)渡效果。
html：

<transition-group tag="ul" name="image"> 
    <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
</transition-group>

css：

.image-enter-active { 
  transform: translateX(0); 
  transition: all 1.5s ease; 
 } 
 .image-leave-active { 
  transform: translateX(-100%); 
  transition: all 1.5s ease; 
 } 
 .image-enter { 
  transform: translateX(100%); 
 } 
 .image-leave { 
  transform: translateX(0); 
 }

這里因?yàn)槲覀兪墙o一個(gè)渲染列表加上過(guò)渡效果所以要使用transition-group而不是單元素的transition，否則會(huì)報(bào)錯(cuò)。
另外就是記得給transition-group加上tag="ul"屬性，不然就會(huì)被默認(rèn)渲染成span了。
css部分需要關(guān)聯(lián)name屬性值作為前綴。

第六步：

給下方按鈕增加切換圖片的點(diǎn)擊事件。
最后我們?cè)偌由弦迫?移出實(shí)現(xiàn)關(guān)閉/打開(kāi)定時(shí)器效果，即用戶鼠標(biāo)停留當(dāng)前圖片停止?jié)L動(dòng)，移出則繼續(xù)。

<template> 
 <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> 
  <div class="slideshow"> 
   <transition-group tag="ul" name="image"> 
    <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
   </transition-group> 
  </div> 
  <div class="bullet"> 
   <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" 
   @click="change(index)" :key="index"></span> 
  </div> 
 </div> 
</template> 
 
<script> 
export default { 
 data () { 
  return { 
   timer: null, //定時(shí)器 
   mark: 0, //比對(duì)圖片索引的變量 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }, 
 methods: { 
  autoPlay () { 
   this.mark++; 
   if (this.mark === 4) { 
    this.mark = 0 
   } 
  }, 
  play () { 
   this.timer = setInterval(this.autoPlay, 2500) 
  }, 
  change (i) { 
   this.mark = i 
  }, 
  stop () { 
   clearInterval(this.timer) 
  }, 
  move () { 
   this.timer = setInterval(this.autoPlay, 2500) 
  } 
 }, 
 created () { 
  this.play() 
 } 
} 
</script>

這個(gè)地方卡了我很長(zhǎng)時(shí)間，因?yàn)楦鶕?jù)原生js定時(shí)器的思路在定義定時(shí)器的時(shí)候就應(yīng)該設(shè)置變量，然后把這個(gè)變量傳到clearInterval函數(shù)里。
問(wèn)題在于vue函數(shù)里設(shè)置變量很不可取，存在定義域的問(wèn)題，開(kāi)啟定時(shí)器跟關(guān)閉定時(shí)器是兩個(gè)函數(shù)，不能共用一個(gè)變量。
后來(lái)靈機(jī)一動(dòng)，想到不如把變量寫(xiě)在data里面？
一試，成功！

至此，輪播圖的功能基本實(shí)現(xiàn)。
當(dāng)然，項(xiàng)目做的比較簡(jiǎn)陋也存在一些bug，如當(dāng)一個(gè)切換動(dòng)畫(huà)未完成前點(diǎn)擊另一個(gè)按鈕會(huì)出現(xiàn)神奇的交錯(cuò)現(xiàn)象，由于時(shí)間關(guān)系還未解決，
希望各位看官能提出寶貴的建議！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: