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图片轮播

来源：https://blog.csdn.net/weixin_43996368/article/details/117778558