」將對應的元素包覆;然後在「.imgShoudMove」設定動畫屬性;最後採用Vue結合Css3來實現輪播圖即可。"/> 」將對應的元素包覆;然後在「.imgShoudMove」設定動畫屬性;最後採用Vue結合Css3來實現輪播圖即可。">

首頁  >  文章  >  web前端  >  使用vue.js如何實作輪播

使用vue.js如何實作輪播

藏色散人
藏色散人原創
2020-12-08 09:30:545306瀏覽

 

使用vue.js實作輪播的方法:首先使用「b7d6aa7d26bbcf1354a58cda375316e1」將對應的元素包覆;然後在「.imgShoudMove」中設定動畫屬性;最後採用Vue結合Css3來實現輪播圖即可。

使用vue.js如何實作輪播

本教學操作環境:windows7系統、vue2.0&&css3版,Dell G3電腦,此方法適用於所有品牌電腦。

本文章採用Vue結合Css3來實現輪播圖。

首先要了解的是Vue的動畫原理。在vue中,如果我們要為元素設定動畫效果,則需要使用一個b7d6aa7d26bbcf1354a58cda375316e16087faffb1c3f26530d25a6b190c2f81將對應的元素包裹住,如下:

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

之後,便可以在.imgShoudMove設定動畫屬性了,如下:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

注意在HTML中,這裡a1f02c36ba31691bcfe87b2722de723b有一個v-if="shoudShow"屬性。 shouldShow這個屬性是在data(){}中設定的,當shouldShow從false-->true時(即img從無到突然出現時),

Vue動畫原理將動畫分為了shouldShouldMove- enter 和imgShouldMove-enter-active 兩個階段。

其中 shouldShouldMove-enter 表示動畫開始的初始狀態, imgShouldMove-enter-active 這表示動畫的終止狀態。而動畫的觸發則是透過if-show引起的。

範例:

HTML程式碼:

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction + &#39;-old&#39;">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :
 class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
 </div>
</template>
Script代码:
<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:&#39;toleft&#39;
 }
 },
 computed:{
 prevIndex(){
 this.direction = &#39;toleft&#39;
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = &#39;toright&#39;
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)
  
 },
 runInterval(){
 this.direction = &#39;toright&#39;
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

與動畫相關的css程式碼如下

.carousel-trans-toright-enter-active,
.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px);
  //新图片从右侧940px进入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px);
  //老图片向左侧940px出去 
} 
.carousel-trans-toleft-enter-active,
.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); 
 //新图片从右侧940px进入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); 
 //老图片向左侧940px出去 
}

注意:對於a1f02c36ba31691bcfe87b2722de723b需要放在fb9722a2cfd0319f66b19b53905e982c裡面,a8a2d94ad6460784ca7a88c66ac1760a需要設定為position:relative; 而a1f02c36ba31691bcfe87b2722de723b必須設定為position:absolute; 步驟非常非常重要,否則每次莫名其妙的總是只有一張圖片顯示。

在每次切換的時候,都要觸發goto()方法,將this.isShow先置false,10毫秒後,this.isShow置true。這時,html中的300ff3b250bc578ac201dd5fb34a0004被觸發,它與css結合觸發動畫效果,持續時間為css屬性中的transition所定的0.5s。

在向前、向後切換的時候,使用到了計算屬性,在div.prevBtn以及div.nextBtn上,我們作了點擊事件綁定,觸發方法goto(),而傳入的正是計算屬性prevIndex,@click="goto(prevIndex)"

計算屬性的設定方法如下:

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },

每隔2秒自動滑動時,我們向left滑動,在data中,設定了變數direction ,它的值要麼為字串'toleft',要麼為'toright'。

我們在計算屬性中對this.direction 進行了設置,並在d477f9ce7bf77f53fbcf36bec1b69b7a中對相應的name進行了字串拼接,如下

<transition v-bind:name="&#39;carousel-trans-&#39; + direction ">

在vue中,除了class和style可以傳入物件、數組,其他的屬性綁定必須進行字串拼接。

推薦:《vue教學

以上是使用vue.js如何實作輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn