【前端】在Vue项⽬中使⽤transition-group实现组件轮播效果
⼀、背景介绍
在项⽬开发的新⼀轮需求中希望将过去做好的echarts图表组件进⾏复⽤轮播，过去我们使⽤⽆缝滚动插件完成列表内容轮播，实现滚动新闻的效果。但是这⼀插件貌似难以使⽤在组件的轮播上，好在机bai缘du巧yi合xia让我发现了Vue 提供了 transition 的封装组件，⽤以给任何元素和组件添加进⼊、离开过渡效果，这不正好与本次需求不谋⽽合嘛。
⼆、查看源码
在Vue.js⽂档中可以看到如下关于的源码：
<template>
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
</template>
<script>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
transition用法搭配template: '<div>Component B</div>'
}
}
})
</script>
<style>
ponent-fade-enter-active, ponent-fade-leave-active {
transition: opacity .3s ease;
}
ponent-fade-enter, ponent-fade-leave-to
/
* ponent-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}
</style>
效果是：选择单选框，页⾯显⽰对应的组件，但是如此操作后却出现关于组件引⼊和使⽤的报错，并且此时还是⼿动操作，要实现⾃动轮播还需要稍微进⾏修改。
三、改写运⽤
于是我进⾏了如下的改写：
<template>
<transition name="slide">
<div v-if="id === 0" key="0">
<e-charts :options="chartOption" />
</div>
<div v-else-if="id === 1" key="1">
<e-charts :options="chartOption" />
</div>
<div v-else-if="id === 2" key="2">
轮播序列中的第三个组件
</div>
<div v-else-if="id === 3" key="3">
轮播序列中的第四个组件
</div>
</transition>
<ul >
<li @click="id = 0">第⼀个</li>
<li @click="id = 1">第⼆个</li>
<li @click="id = 2">第三个</li>
<li @click="id = n">第n个</li>
</ul>
</template>
<script>
//照常引⼊所需组件，如下：
import Component from '../'
export default {
components: {
Component
}
}
</script>
此时便不会出现组件引⼊与使⽤报错的问题，下⼀步实现⾃动轮播效果。
我的改写⽅法如下：
为实现组件轮播，那么transition组件⾥⾯就有不⽌⼀个元素了，所以必须将 transition 改成 transition-group
<template >
<div class="chart-wrapper">
<transition-group name="slide" mode="out-in">
<div v-if="id === 0" key="0">
<component0 />
<!--添加第⼀个需要轮播的组件，下同-->
</div>
<div v-if="id === 1" key="1">
<component1 />
</div>
<div v-if="id === 2" key="2">
<component2 />
</div>
<div v-if="id === 3" key="3">
<component3 />
</div>
</transition-group>
</div>
</template>
<script>
//引⼊所需组件如下，每个组件⾥都有若⼲个echarts图表
import Component from '../'
export default {
components: {
Component
},
data() {
return {
id: 0,
}
},
mounted() {
//设置setInterval定时调⽤使得id不停切换
setInterval(() => {
this.changeId()
}, 3000)//设置切换间隔
},
methods: {
//添加⾃动切换id的⽅法
changeId() {
if (this.id == 0 || this.id == 1 || this.id == 2) {
setTimeout(() => {
this.id++
}, 1000)
} else {
setTimeout(() => {
this.id = 0
}, 1000)
}
},
},
}
</script>
因为 transition-group 和 transition 的原理基本上是⼀样的，所以只需要把 transition 改成 transition-group，其它地⽅⽆须改动。
运⾏起来后，发现 echarts 图表组件的轮播效果正常了！但是由于echarts是数据驱动的，所以要有给⼒的数据载⼊速度来保证流畅的轮播效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。