vue.js實(shí)現(xiàn)簡單輪播圖效果
學(xué)習(xí)了vue.js也有一段時(shí)間了，做了個(gè)小demo來熟悉一下，很常見的demo，-------輪播圖，沒學(xué)vue之前的輪播圖用JavaScript或者jquery都非常簡單，發(fā)現(xiàn)用vue來寫也挺有意思的。說下簡單的思路，圖片的輪播用v-if或者v-show來代替原來的Js滑動(dòng)，過度效果用transition可簡單實(shí)現(xiàn)，注意，滑動(dòng)過程中是能看見兩張圖的，所以要用兩個(gè)transition。
（1）先寫出整體的框架
<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if='ifshow' :src='imgArray[nowindex]'>
</transition>
<transition name="slide-trans-old">
<img v-if="!ifshow" :src="imgArray[nowindex]">
</transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</div>
</div>
</template>
根據(jù)imgArray這個(gè)照片的數(shù)組渲染小圓點(diǎn)的數(shù)量，為span綁定on為小圓點(diǎn)點(diǎn)亮的狀態(tài)，照片的顯示隱藏通過自定義變量ifshow來顯示，nowindex則控制輪播對應(yīng)的照片。
（2）輪播圖的數(shù)組，如果是本地的圖片，而且不放在static文件下的，請用require圈上路徑，否則路徑會(huì)報(bào)錯(cuò)。如果是從后臺服務(wù)器獲取的則不需要。
data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}
（3）主要就是通過改變自定義變量nowindex來改變輪播圖的狀態(tài)，要注意滑動(dòng)的過程是能看見兩張圖的，所以在goto函數(shù)中設(shè)置了一個(gè)短暫的定時(shí)器，讓一張顯示另一張隱藏，分別加上不同的過度效果。
<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
},
timerun(){
let that = this;
setInterval(function(){
that.goto(that.nextindex)
},2000)
}
}
}
</script>
到這里，這個(gè)簡單的輪播圖就到此結(jié)束了。
關(guān)于vue.js的學(xué)習(xí)教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
相信大部分兄弟都體驗(yàn)過Vite了,都知道它很快,在學(xué)習(xí)的時(shí)候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關(guān)于Vite常見配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-09-09
Vue+Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴(kuò)展插件ol-ext，可以用來實(shí)現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動(dòng)等操作，本文將主要介紹通過Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)，需要的同學(xué)可以學(xué)習(xí)一下2021-11-11
vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能示例代碼
在Vue項(xiàng)目中,通過使用vue-print-nb插件,可以實(shí)現(xiàn)頁面的打印功能,這篇文章主要介紹了vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能的相關(guān)資料,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了使用vue重構(gòu)資訊頁面的實(shí)例代碼解析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue 組件參數(shù)校驗(yàn)與非props特性的方法
這篇文章主要介紹了Vue 組件參數(shù)校驗(yàn)與非props特性的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue組件之間是有聯(lián)系的，避免不了組件之間要互相傳值，那么如何實(shí)現(xiàn)Vue兩個(gè)同級組件傳值，本文就來介紹一下，感興趣的可以了解一下2021-07-07
富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能
這篇文章主要介紹了富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
最近有個(gè)項(xiàng)目需求就是在客戶端的右上角要實(shí)時(shí)展示提醒消息,下面這篇文章主要給大家介紹了關(guān)于Vue通知提醒框(Notification)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11