使用Vue快速实现一个无缝轮播效果
需求简介
轮播图是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。
我们来看一个需求
上述需求核心就是实现一个无缝轮播的切换效果。以这个需求为例，我们看看最终实现效果：
实现思路
要想实现一个无缝的轮播效果，其实非常简单，核心思想就是动态改变显示的列表而已。比如我们有这样一个数组
const list = ref([
{ name: 1, id: 1 },
{ name: 2, id: 2 },
{ name: 3, id: 3 }
])
如果我们想无缝切换的展示这个数据，最简单的代码就是动态的改变下面的代码的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>
那如何实现切换的样式呢？也非常简单，我们只要给元素添加一个出现样式和离开样式即可。现在，我们来具体实现这样一个需求。
技术方案
数据的动态切换
要想实现一个数据的动态循环切换效果，是非常容易的：
<template>
<div v-for="(build, index) in list" :key="index">
<div v-show="index === selectIndex">
卡片自定义内容
</div>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref(
[{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)
// #计时器实例
let timer: any = null
// >计时器逻辑
const timeFuc = () => {
timer = setInterval(() => {
// 更改选中的index
if (selectIndex.value >= list.value.length - 1) {
selectIndex.value = 0
} else {
selectIndex.value++
}
}, 5000)
}
timeFuc()
<scriptp>
上述代码中，我们设置了一个定时器，定时器每5s执行一次，每次执行都会动态更改当前要显示的数据索引值，当索引值达到最大实，在将其重置。通过上述的简单代码，我们就实现了一个可以自动切换的循环渲染的卡片。
动画添加
要想实现最终效果的动态效果也非常容易，我们只需要给每个元素出现时设置一些样式，离开时设置一些样式即可。借助vue的Transition组件，我们能很容易实现这样一个效果。
如果你不了解vue的Transition组件，请去官网补充下知识：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">
卡片自定义内容
</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 }]
)
// #计时器实例
let timer: any = null
// >计时器逻辑
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是动态的，元素不断地在显示与隐藏。因此，Transition标签的进入样式和离开样式会动态触发，从而形成切换效果。
v-enter是元素的进入样式，进入时，我们从最右边偏移100%的距离到正常位置，透明度从0到1，这个过程持续0.6s，实现了元素左移淡入的效果。
v-leave是元素的离开样式，离开时，我们从正常位置偏移到100%的左侧位置，透明度从1到0，这个过程持续0.6s，实现了元素左移淡出的效果。
在这些类的共同作用下，我们实现了元素的动态切换。
你可能注意到了我给元素设置了一个banner-scroll-wrap类名，并使用了position: absolute，这样设置的注意目的是保证切换离开元素的淡出效果和进入元素的淡入效果是连贯的。如果你不这样写，可能会出现样式问题。
此外，注意我给Transition设置了key="Transition"，这样些会保证每次数据在切换时，transition能够重新渲染，触发元素离开和进入的样式。
至此，我们就完成了基本功能样式
轮播的停止与恢复
很常见的一种情况就是我们需要鼠标放在卡片上时停止轮播，离开卡片的时候恢复轮播，这非常容易。
<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">
卡片自定义内容
</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 }]
)
// #计时器实例
let timer: any = null
// >计时器逻辑
const timeFuc = () => {
timer = setInterval(() => {
// 更改选中的index
if (selectIndex.value >= list.value.length - 1) {
selectIndex.value = 0
} else {
selectIndex.value++
}
}, 5000)
}
// >开启轮播
const start = () => {
if (timer) return
timeFuc()
}
// >关闭轮播
const stop = () => {
clearInterval(timer)
timer = null
}
timeFuc()
<scriptp>
<style lang="less" scoped>
<style/>
解决重影问题
在某些情况下，我们离开这个页面很久后（浏览器切换到其他选项卡），然后在切回来的时候，可能会出现短暂的画面重影问题，这个问题也很好解决，加上下面的代码即可
<script setup>
//...
// 解决切屏后重影的问题
onMounted(() => {
document.addEventListener('visibilitychange', () => {
// 用户息屏、或者切到后台运行 （离开页面）
if (document.visibilityState === 'hidden') {
stop()
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
start()
}
})
})
onBeforeUnmount(() => stop())
<scriptp>
visibilitychange 事件：当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。该事件不可取消。
总结
在本教程中，我们通过简单代码实现了无缝轮播效果，样式是左右切换，我们也可以通过样式控制实现上下切换的效果，比如将translateX设置为translateY即可。
.v-enter-from {
transform: translateY(100%);
opacity: 0;
}
以上就是使用Vue快速实现一个无缝轮播效果的详细内容，更多关于Vue无缝轮播的资料请关注脚本之家其它相关文章！
相关文章
vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用
这篇文章主要介绍了vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了vue轮播图插件vue-awesome-swiper，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue-froala-wysiwyg 富文本编辑器功能，分步骤给大家介绍了vue3.中如何安装使用froala,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
Vue 3 作为前端开发中一个非常流行的框架,在错误处理方面提供了灵活和强大的能力,本文将深入介绍在 Vue 3 中如何捕获和处理错误,包括组件级的错误处理、全局错误处理以及如何与异常日志系统集成,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了如何使用ant-design-vue的Table组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
customRef()是Vue3的高级工具,允许开发者创建具有复杂依赖跟踪和自定义更新逻辑的ref对象,本文详细介绍了customRef()的使用场景、基本用法、功能详解以及最佳实践,包括防抖、异步更新等用例,旨在帮助开发者更好地理解和使用这一强大功能2024-09-09
这篇文章主要介绍了vue3中ref绑定dom或者组件失败的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要给大家介绍了关于如何使用Vue做个简单的比较两个数字大小页面的相关资料,实现一个比较两个数字大小的页面，练习Vue实例的创建、数据绑定和事件监听方法,需要的朋友可以参考下2023-10-10
下面小编就为大家分享一篇解决iview打包时UglifyJs报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 解决在微信内置浏览器中调用支付宝支付的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论