使用Vue快速實(shí)現(xiàn)一個(gè)無(wú)縫輪播效果
需求簡(jiǎn)介
輪播圖是我們前端開(kāi)發(fā)中的一個(gè)常見(jiàn)需求，在項(xiàng)目開(kāi)發(fā)中，我們可以使用element、ant等UI庫(kù)實(shí)現(xiàn)。某些場(chǎng)景，為了一個(gè)簡(jiǎn)單的功能安裝一個(gè)庫(kù)是沒(méi)必要的，我們最好的選擇就是手搓。
我們來(lái)看一個(gè)需求
上述需求核心就是實(shí)現(xiàn)一個(gè)無(wú)縫輪播的切換效果。以這個(gè)需求為例，我們看看最終實(shí)現(xiàn)效果：
實(shí)現(xiàn)思路
要想實(shí)現(xiàn)一個(gè)無(wú)縫的輪播效果，其實(shí)非常簡(jiǎn)單，核心思想就是動(dòng)態(tài)改變顯示的列表而已。比如我們有這樣一個(gè)數(shù)組
const list = ref([
{ name: 1, id: 1 },
{ name: 2, id: 2 },
{ name: 3, id: 3 }
])
如果我們想無(wú)縫切換的展示這個(gè)數(shù)據(jù)，最簡(jiǎn)單的代碼就是動(dòng)態(tài)的改變下面的代碼的index
<template>
<div>
{{ list[index] }}
</div>
</template>
<script setup>
const index = ref(0)
const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 2, id: 2 }])
<scriptp>
那如何實(shí)現(xiàn)切換的樣式呢？也非常簡(jiǎn)單，我們只要給元素添加一個(gè)出現(xiàn)樣式和離開(kāi)樣式即可?，F(xiàn)在，我們來(lái)具體實(shí)現(xiàn)這樣一個(gè)需求。
技術(shù)方案
數(shù)據(jù)的動(dòng)態(tài)切換
要想實(shí)現(xiàn)一個(gè)數(shù)據(jù)的動(dòng)態(tài)循環(huán)切換效果，是非常容易的：
<template>
<div v-for="(build, index) in list" :key="index">
<div v-show="index === selectIndex">
卡片自定義內(nèi)容
</div>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref(
[{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)
// #計(jì)時(shí)器實(shí)例
let timer: any = null
// >計(jì)時(shí)器邏輯
const timeFuc = () => {
timer = setInterval(() => {
// 更改選中的index
if (selectIndex.value >= list.value.length - 1) {
selectIndex.value = 0
} else {
selectIndex.value++
}
}, 5000)
}
timeFuc()
<scriptp>
上述代碼中，我們?cè)O(shè)置了一個(gè)定時(shí)器，定時(shí)器每5s執(zhí)行一次，每次執(zhí)行都會(huì)動(dòng)態(tài)更改當(dāng)前要顯示的數(shù)據(jù)索引值，當(dāng)索引值達(dá)到最大實(shí)，在將其重置。通過(guò)上述的簡(jiǎn)單代碼，我們就實(shí)現(xiàn)了一個(gè)可以自動(dòng)切換的循環(huán)渲染的卡片。
動(dòng)畫(huà)添加
要想實(shí)現(xiàn)最終效果的動(dòng)態(tài)效果也非常容易，我們只需要給每個(gè)元素出現(xiàn)時(shí)設(shè)置一些樣式，離開(kāi)時(shí)設(shè)置一些樣式即可。借助vue的Transition組件，我們能很容易實(shí)現(xiàn)這樣一個(gè)效果。
如果你不了解vue的Transition組件，請(qǐng)去官網(wǎng)補(bǔ)充下知識(shí)：cn.vuejs.org/guide/built-ins/transition.html
<template>
<div class="main-content">
<Transition v-for="(build, index) in list" :key="selectIndex">
<div class="banner-scroll-wrap" v-show="index === selectIndex">
卡片自定義內(nèi)容
</div>
</Transition>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref(
[{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)
// #計(jì)時(shí)器實(shí)例
let timer: any = null
// >計(jì)時(shí)器邏輯
const timeFuc = () => {
timer = setInterval(() => {
// 更改選中的index
if (selectIndex.value >= list.value.length - 1) {
selectIndex.value = 0
} else {
selectIndex.value++
}
}, 5000)
}
timeFuc()
<scriptp>
<style lang="less" scoped>
.main-content {
position: relative;
height: 100%;
.banner-scroll-wrap {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
}
.v-enter-from {
transform: translateX(100%);
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
}
.v-enter-to {
transform: translateX(0);
opacity: 1;
}
.v-leave-from {
transform: translateX(0);
opacity: 1;
}
.v-leave-to {
transform: translateX(-100%);
opacity: 0;
}
<style/>
上述代碼中，由于 selectIndex是動(dòng)態(tài)的，元素不斷地在顯示與隱藏。因此，Transition標(biāo)簽的進(jìn)入樣式和離開(kāi)樣式會(huì)動(dòng)態(tài)觸發(fā)，從而形成切換效果。
v-enter是元素的進(jìn)入樣式，進(jìn)入時(shí)，我們從最右邊偏移100%的距離到正常位置，透明度從0到1，這個(gè)過(guò)程持續(xù)0.6s，實(shí)現(xiàn)了元素左移淡入的效果。
v-leave是元素的離開(kāi)樣式，離開(kāi)時(shí)，我們從正常位置偏移到100%的左側(cè)位置，透明度從1到0，這個(gè)過(guò)程持續(xù)0.6s，實(shí)現(xiàn)了元素左移淡出的效果。
在這些類(lèi)的共同作用下，我們實(shí)現(xiàn)了元素的動(dòng)態(tài)切換。
你可能注意到了我給元素設(shè)置了一個(gè)banner-scroll-wrap類(lèi)名，并使用了position: absolute，這樣設(shè)置的注意目的是保證切換離開(kāi)元素的淡出效果和進(jìn)入元素的淡入效果是連貫的。如果你不這樣寫(xiě)，可能會(huì)出現(xiàn)樣式問(wèn)題。
此外，注意我給Transition設(shè)置了key="Transition"，這樣些會(huì)保證每次數(shù)據(jù)在切換時(shí)，transition能夠重新渲染，觸發(fā)元素離開(kāi)和進(jìn)入的樣式。
至此，我們就完成了基本功能樣式
輪播的停止與恢復(fù)
很常見(jiàn)的一種情況就是我們需要鼠標(biāo)放在卡片上時(shí)停止輪播，離開(kāi)卡片的時(shí)候恢復(fù)輪播，這非常容易。
<template>
<div class="main-content" @mouseenter="stop()" @mouseleave="start()">
<Transition v-for="(build, index) in list" :key="selectIndex">
<div class="banner-scroll-wrap" v-show="index === selectIndex">
卡片自定義內(nèi)容
</div>
</Transition>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref(
[{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)
// #計(jì)時(shí)器實(shí)例
let timer: any = null
// >計(jì)時(shí)器邏輯
const timeFuc = () => {
timer = setInterval(() => {
// 更改選中的index
if (selectIndex.value >= list.value.length - 1) {
selectIndex.value = 0
} else {
selectIndex.value++
}
}, 5000)
}
// >開(kāi)啟輪播
const start = () => {
if (timer) return
timeFuc()
}
// >關(guān)閉輪播
const stop = () => {
clearInterval(timer)
timer = null
}
timeFuc()
<scriptp>
<style lang="less" scoped>
<style/>
解決重影問(wèn)題
在某些情況下，我們離開(kāi)這個(gè)頁(yè)面很久后（瀏覽器切換到其他選項(xiàng)卡），然后在切回來(lái)的時(shí)候，可能會(huì)出現(xiàn)短暫的畫(huà)面重影問(wèn)題，這個(gè)問(wèn)題也很好解決，加上下面的代碼即可
<script setup>
//...
// 解決切屏后重影的問(wèn)題
onMounted(() => {
document.addEventListener('visibilitychange', () => {
// 用戶(hù)息屏、或者切到后臺(tái)運(yùn)行 （離開(kāi)頁(yè)面）
if (document.visibilityState === 'hidden') {
stop()
}
// 用戶(hù)打開(kāi)或回到頁(yè)面
if (document.visibilityState === 'visible') {
start()
}
})
})
onBeforeUnmount(() => stop())
<scriptp>
visibilitychange 事件：當(dāng)其選項(xiàng)卡的內(nèi)容變得可見(jiàn)或被隱藏時(shí)，會(huì)在 document 上觸發(fā) visibilitychange 事件。該事件不可取消。
總結(jié)
在本教程中，我們通過(guò)簡(jiǎn)單代碼實(shí)現(xiàn)了無(wú)縫輪播效果，樣式是左右切換，我們也可以通過(guò)樣式控制實(shí)現(xiàn)上下切換的效果，比如將translateX設(shè)置為translateY即可。
.v-enter-from {
transform: translateY(100%);
opacity: 0;
}
以上就是使用Vue快速實(shí)現(xiàn)一個(gè)無(wú)縫輪播效果的詳細(xì)內(nèi)容，更多關(guān)于Vue無(wú)縫輪播的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue-treeselect顯示unknown的問(wèn)題及解決
這篇文章主要介紹了vue-treeselect顯示unknown的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue一次性簡(jiǎn)潔明了引入所有公共組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue+axios實(shí)現(xiàn)統(tǒng)一接口管理的方法
這篇文章主要介紹了Vue+axios實(shí)現(xiàn)統(tǒng)一接口管理的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue輪詢(xún)請(qǐng)求解決方案的完整實(shí)例
項(xiàng)目開(kāi)發(fā)中需要做一個(gè)輪詢(xún),所以將實(shí)現(xiàn)的過(guò)程記錄了一下,下面這篇文章主要給大家介紹了關(guān)于vue輪詢(xún)解決方案的相關(guān)資料,需要的朋友可以參考下2021-07-07
vue實(shí)現(xiàn)打印指定組件內(nèi)容的示例詳解
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁(yè)打印自動(dòng)適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新的方法示例
這篇文章主要介紹了Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪
這篇文章主要為大家詳細(xì)介紹了Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue中vue-router安裝與配置方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
ElementUI嵌套頁(yè)面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例
本文主要介紹了ElementUI嵌套頁(yè)面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07