vue实现卡片翻转轮播展示
更新时间：2021年06月28日 15:22:14 作者：Cardhu丶
这篇文章主要为大家详细介绍了vue实现卡片翻转轮播展示，同时在翻转时切换数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue卡片翻转轮播展示，同时在翻转时切换数据，供大家参考，具体内容如下
效果及代码
代码：
<template>
<div class="list-container">
<div class="reason" v-if="list1.length > 0 || list2.length > 0">
<div class="logo">
<svg-icon class="center-svg" icon-class="centerLogo"></svg-icon>
<div class="echart">
<echart :option="option" echartId="roadP" />
</div>
</div>
<RoadComponent :list="list1[0]" :style="{ display: show1 }"></RoadComponent>
<RoadComponent :list="list2[0]" :style="{ display: show2 }"></RoadComponent>
<RoadComponent :list="list1[1]" :style="{ display: show3 }"></RoadComponent>
<RoadComponent :list="list2[1]" :style="{ display: show4 }"></RoadComponent>
<RoadComponent :list="list1[2]" :style="{ display: show5 }"></RoadComponent>
<RoadComponent :list="list2[2]" :style="{ display: show6 }"></RoadComponent>
</div>
</div>
</template>
<script>
import { defineComponent, inject, onMounted, reactive, onUnmounted, toRefs } from 'vue';
import { congestionPredict } from '@/apis/fullView';
import echart from '@/components/common/echart';
import '@/assets/icons/fullView/westToEast.svg';
import '@/assets/icons/fullView/eastToWest.svg';
import '@/assets/icons/fullView/northToSouth.svg';
import '@/assets/icons/fullView/southToNorth.svg';
import '@/assets/icons/fullView/centerLogo.svg';
import RoadComponent from '@/views/fullView/left/RoadComponent';
export default defineComponent({
name: 'RoadP',
components: { echart, RoadComponent },
setup() {
let echarts = inject('ec');
const dataMap = reactive({
interval: null,
interval1: null,
list1: [],
list2: [],
list: [],
option: {},
timeout: 10,
show1: 'block',
show2: 'none',
show3: 'block',
show4: 'none',
show5: 'block',
show6: 'none',
});
onMounted(() => {
getData();
dataMap.interval = setInterval(() => {
getData();
}, 60 * 1000);
dataMap.interval1 = setInterval(() => {
if (dataMap.timeout > 8 && dataMap.timeout < 11) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'block';
dataMap.show3 = 'block';
dataMap.show5 = 'block';
dataMap.show2 = 'none';
dataMap.show4 = 'none';
dataMap.show6 = 'none';
} else if (dataMap.timeout === 8) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'none';
dataMap.show3 = 'block';
dataMap.show5 = 'block';
dataMap.show2 = 'block';
dataMap.show4 = 'none';
dataMap.show6 = 'none';
} else if (dataMap.timeout === 7) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'none';
dataMap.show3 = 'none';
dataMap.show5 = 'block';
dataMap.show2 = 'block';
dataMap.show4 = 'block';
dataMap.show6 = 'none';
} else if (dataMap.timeout < 7 && dataMap.timeout > 3) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'none';
dataMap.show3 = 'none';
dataMap.show5 = 'none';
dataMap.show2 = 'block';
dataMap.show4 = 'block';
dataMap.show6 = 'block';
} else if (dataMap.timeout === 3) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'block';
dataMap.show3 = 'none';
dataMap.show5 = 'none';
dataMap.show2 = 'none';
dataMap.show4 = 'block';
dataMap.show6 = 'block';
} else if (dataMap.timeout === 2) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'block';
dataMap.show3 = 'block';
dataMap.show5 = 'none';
dataMap.show2 = 'none';
dataMap.show4 = 'none';
dataMap.show6 = 'block';
} else if (dataMap.timeout === 1) {
dataMap.timeout = dataMap.timeout - 1;
dataMap.show1 = 'block';
dataMap.show3 = 'block';
dataMap.show5 = 'block';
dataMap.show2 = 'none';
dataMap.show4 = 'none';
dataMap.show6 = 'none';
} else {
dataMap.timeout = 10;
}
}, 1000);
});
onUnmounted(() => {
clearInterval(dataMap.interval);
clearInterval(dataMap.interval1);
});
const getData = () => {
congestionPredict()
.then((res) => {
if (res && res.code === 0 && res.data) {
dataMap.list1 = [];
dataMap.list2 = [];
for (let i = 0; i < 6; i = i + 2) {
dataMap.list1.push([
{
name: res.data[i].name,
direction: res.data[i].direction,
value: res.data[i].index.toFixed(1),
icon: res.data[i].englishDirection,
},
{
name: res.data[i + 1].name,
direction: res.data[i + 1].direction,
value: res.data[i + 1].index.toFixed(1),
icon: res.data[i + 1].englishDirection,
},
]);
}
for (let j = res.data.length - 1; j > res.data.length - 6; j = j - 2) {
dataMap.list2.push([
{
name: res.data[j].name,
direction: res.data[j].direction,
value: res.data[j].index.toFixed(1),
icon: res.data[j].englishDirection,
},
{
name: res.data[j - 1].name,
direction: res.data[j - 1].direction,
value: res.data[j - 1].index.toFixed(1),
icon: res.data[j - 1].englishDirection,
},
]);
}
}
})
.catch((err) => {
console.log(err);
})
.finally(() => {
dataMap.option = getOption();
});
};
const getOption = () => {
return {
series: [
{
type: 'liquidFill',
name: '',
radius: '85%',
center: ['50%', '45%'],
data: [0.55, 0.5, 0.5],
color: ['rgba(0,118,255,0.5)', 'rgba(0,102,255,0.5)', 'rgba(0,185,255,0.6)'],
outline: {
show: false,
},
backgroundStyle: {
color: 'transparent',
borderColor: 'transparent',
borderWidth: 1,
shadowColor: 'transparent',
shadowBlur: 0,
},
label: {
show: false,
},
},
],
};
};
return {
...toRefs(dataMap),
};
},
});
</script>
<style scoped lang="less">
.list-container {
width: 100%;
height: 280px;
}
.reason {
width: 696px;
margin: 16px auto;
height: 228px;
position: relative;
list-style: none;
.logo {
width: 150px;
height: 150px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: url('~@/assets/img/fullView/centerGround.dynamic.png');
background-size: 100% 100%;
}
.echart {
width: 158px;
height: 158px;
position: absolute;
left: -4px;
top: 4px;
}
}
.center-svg {
width: 90px;
height: 100px;
position: absolute;
left: 30px;
top: 25px;
z-index: 15;
}
</style>
卡片组件
<template>
<div class="goBack" v-if="list.length > 0">
<div class="top">
<svg-icon class="svg" :icon-class="list[0].icon"></svg-icon>
<div>
<div>
<p class="span-container text-overflow">{{ list[0].name }}</p>
<p class="index" :style="{ color: switchColor(list[0].value) }">{{ list[0].value }}</p>
</div>
<div>
<p class="span-container text-overflow">{{ list[1].name }}</p>
<p class="index" :style="{ color: switchColor(list[1].value) }">{{ list[1].value }}</p>
</div>
</div>
<svg-icon class="svg" :icon-class="list[1].icon"></svg-icon>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'RoadComponent',
props: {
list: {},
},
setup() {
const switchColor = (value) => {
if (value > 0 && value <= 2) {
return '#00DBEB';
} else if (value > 2 && value <= 3) {
return '#FFD200';
} else if (value > 3 && value <= 4) {
return '#FF7309';
} else if (value > 4 && value <= 5) {
return '#FF0000';
}
};
return {
switchColor,
};
},
});
</script>
<style lang="less" scoped>
.goBack {
transform-style: preserve-3d;
animation: back 0.5s linear 1;
}
.back:hover {
animation-play-state: paused;
}
@keyframes back {
0% {
transform: rotateZ(0deg) rotateY(0deg) rotateX(-90deg);
}
100% {
transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg);
}
}
.span-container {
width: 150px;
margin: 0 0 5px 5px;
color: var(--text-blue);
font-size: var(--font-traffic-size);
}
.svg {
width: 41px;
height: 41px;
}
.top {
display: flex;
flex-wrap: nowrap;
padding: 0 20px;
margin: 0 0 14px 0;
justify-content: space-between;
align-items: center;
height: 68px;
border-radius: 10px;
opacity: 0.9;
background: linear-gradient(
89deg,
rgba(0, 76, 169, 0.5) 0%,
rgba(0, 76, 169, 0) 46%,
rgba(0, 76, 169, 0) 49%,
rgba(0, 76, 169, 0) 52%,
rgba(0, 76, 169, 0.5) 100%
);
}
.top > div {
width: 640px;
display: flex;
text-align: center;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
& > div {
width: 160px;
span {
margin-left: 15px;
}
}
.index {
width: 155px;
height: 28px;
font-size: var(--font-size-chart-title);
text-align: center;
margin: 0;
line-height: 28px;
}
}
</style>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近在做一个基于vue的后台管理项目。接下来通过本文给大家分析一款基于vue做一个禅道主页拖拽效果,需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vue生命周期，文章通过结合案例更加的通俗易懂,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了在Vue2中注册全局组件的两种方法,非常的细致,需要的朋友可以参考下2022-07-07
本篇文章主要介绍了vue + socket.io实现一个简易聊天室示例代码，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
这篇文章主要介绍了手写Vue弹窗Modal的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧2022-08-08
这篇文章主要介绍了Vue中的请求拦截器和响应拦截器用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue3+ElementPlus在el-table表格中显示时间的示例代码
文章介绍了如何在Vue3+ElementPlus的el-table表格中显示时间,并提供了相关的代码示例,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了详解Vue 动态组件与全局事件绑定总结，从示例中发现并解决问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue-cli3打包时图片压缩处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论