vue实时动态切换轮播
HTML
<div class="TimeVideo">
<!-- 实时视频 -->
<div class="title-btn">
<div v-for="(item, index) in data" :key="index" :class="i == index ? 'title-active' : 'title'">
<div> {{ item.name }}</div>
</div>
</div>
<div class="video-cencer">
<div v-for="(item, index) in data" :key="index" @click="tab(index)" class="video-list">
<!-- {{ item.name }} -->
<div class="video-box" v-if="i == 0">1</div>
<div class="video-box" v-if="i == 1">2</div>
<div class="video-box" v-if="i == 2">3</div>
<div class="video-box" v-if="i == 3">4</div>
</div>
</div>
</div>
JS
data() {
return {
i: 0,
data: [],
timer: null // 定时器
}
},
mounted() {
this.getData()
this.timer = setInterval(() => {
this.i += 1;
if (this.i > 3) {
this.i = 0; // 循环
}
}, 1000);
},
// 销毁定时器
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
methods: {
async getData() {
this.data = [
{ name: '入走行线' },
{ name: '入整备棚' },
{ name: '入停车棚' },
{ name: '出停车棚' },
]
},
tab(index) {
this.i = index;
}
}
CSS
.TimeVideo {
padding: 10px;
.title-active {
// color: red;
letter-spacing: 2px;
background: #0b59b0;
}
.title {
letter-spacing: 2px;
color: aliceblue;
}
.title-btn {
color: aliceblue;
font-size: 20px;
line-height: 40px;
display: flex;
text-align: center;
justify-content: center;
div {
width: 170px;
border: 1px solid #275f8a;
border-left: none;
}
div:nth-child(1) {
border-left: 1px solid #275f8a;
// background: #0b59b0;
}
}
.video-cencer {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.video-list {
display: flex;
padding-top: 10px;
.video-box {
width: 330px;
height: 250px;
background: #08385d;
margin: 1% 0;
position: relative;
.video-name {
position: absolute;
right: 2%;
top: 10px;
width: 80px;
height: 30px;
background: #000000;
opacity: 0.5;
border-radius: 19px;
color: #ffffff;
font-size: 16px;
text-align: center;
}
}
}
}
全部代码
<template>
<div class="TimeVideo">
<!-- 实时视频 -->
<div class="title-btn">
<div v-for="(item, index) in data" :key="index" :class="i == index ? 'title-active' : 'title'">
<div> {{ item.name }}</div>
</div>
</div>
<div class="video-cencer">
<div v-for="(item, index) in data" :key="index" @click="tab(index)" class="video-list">
<!-- {{ item.name }} -->
<div class="video-box" v-if="i == 0">1</div>
<div class="video-box" v-if="i == 1">2</div>
<div class="video-box" v-if="i == 2">3</div>
<div class="video-box" v-if="i == 3">4</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "TimeVideo",
data() {
return {
i: 0,
data: [],
timer: null // 定时器
}
},
created() {
},
mounted() {
this.getData()
this.timer = setInterval(() => {
this.i += 1;
if (this.i > 3) {
this.i = 0; // 循环
}
}, 1000);
},
// 销毁定时器
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
methods: {
async getData() {
this.data = [
{ name: '入走行线' },
{ name: '入整备棚' },
{ name: '入停车棚' },
{ name: '出停车棚' },
]
},
tab(index) {
this.i = index;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.TimeVideo {
padding: 10px;
.title-active {
// color: red;
letter-spacing: 2px;
background: #0b59b0;
}
.title {
letter-spacing: 2px;
color: aliceblue;
}
.title-btn {
color: aliceblue;
font-size: 20px;
line-height: 40px;
display: flex;
text-align: center;
justify-content: center;
div {
width: 170px;
border: 1px solid #275f8a;
border-left: none;
}
div:nth-child(1) {
border-left: 1px solid #275f8a;
// background: #0b59b0;
}
}
.video-cencer {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.video-list {
display: flex;
padding-top: 10px;
.video-box {
width: 330px;
height: 250px;
background: #08385d;
margin: 1% 0;
position: relative;
.video-name {
position: absolute;
right: 2%;
top: 10px;
width: 80px;
height: 30px;
background: #000000;
opacity: 0.5;
border-radius: 19px;
color: #ffffff;
font-size: 16px;
text-align: center;
}
}
}
}
</style>