广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现卡片翻转轮播展示
  • 236

0
分享到

vue实现卡片翻转轮播展示

2024-04-02 19:04:59 236人浏览 独家记忆
摘要

Vue卡片翻转轮播展示，同时在翻转时切换数据，供大家参考，具体内容如下 效果及代码 代码： <template> <div class="list-con

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue实现卡片翻转轮播展示

本文链接: https://www.lsjlt.com/news/129307.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • vue实现卡片翻转轮播展示
    vue卡片翻转轮播展示，同时在翻转时切换数据，供大家参考，具体内容如下 效果及代码 代码： <template> <div class="list-con...
    99+
    2022-11-12
  • Vue组件实现景深卡片轮播示例
    目录前言需求拆解开发思路(vue2)开发过程后记前言 朋友的朋友做了个首页，首页用到一个卡片轮播，大概就是这个样子的： 第一版他们是开发出来了，但是各种bug，希望我帮忙改一下。 ...
    99+
    2022-11-13
  • vue实现轮播图片
    本文实例为大家分享了vue实现轮播图片的具体代码，供大家参考，具体内容如下 1、效果图 2、案例 <template>        <section class...
    99+
    2022-09-27
  • android实现扑克卡片翻转
    今天看见一个Android 扑克卡片翻转效果的帖子，于是手痒想学一学，由于接触过的Animation动画等比较少，所以感觉很新奇。 首先，说一下布局，是FrameLayout,...
    99+
    2022-06-07
    Android
  • Android实现卡片翻转动画
    最近项目上用到了卡片的翻转效果，大致研究了下，也参考了网上的一些Demo，简单实现如下： activity_main.xml <?xml version=...
    99+
    2022-06-06
    动画 Android
  • Android如何实现翻转动画效果（卡片翻转）
    目录前言需求一、先介绍三个插值器二、实现步骤1.效果图2.布局3.逻辑判断（是否隐藏）4.翻转动画5.bug出现6.bug解决三、源码四、总结前言 最近好友问计蒙翻转动画，恰好在大...
    99+
    2022-11-12
  • vue3.x使用swiper实现卡片轮播
    本文实例为大家分享了vue3.x使用swiper实现卡片轮播的具体代码，供大家参考，具体内容如下 版本号： vue/cli：4.5.12swiper：^6.8.4 安装 npm in...
    99+
    2022-09-27
  • iOS实现3D卡片式轮播效果
    本文实例为大家分享了iOS实现3D卡片式轮播效果的具体代码，供大家参考，具体内容如下 效果： 参考UITableView的UITableViewDataSource和UITable...
    99+
    2022-05-28
    iOS 3D 轮播
  • js+css实现卡片轮播图效果
    本文实例为大家分享了js+css实现卡片轮播图效果的具体代码，供大家参考，具体内容如下 实现点击的时候切换卡片，自动轮播，鼠标移入暂停，移出继续轮播,有动画事件效果就是这样 下面是...
    99+
    2022-11-13
  • css3如何实现卡片翻转效果
    本文小编为大家详细介绍“css3如何实现卡片翻转效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3如何实现卡片翻转效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 ...
    99+
    2022-10-19
  • android如何实现扑克卡片翻转
    这篇文章主要介绍了android如何实现扑克卡片翻转的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇android如何实现扑克卡片翻转文章都会有所收获，下面我们一起来看看吧。还需额外注意一点：这是刚刚才发现的问题...
    99+
    2023-06-30
  • CSS如何实现卡片3D翻转效果
    这篇文章将为大家详细讲解有关CSS如何实现卡片3D翻转效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果：代码：html：<div class="main">...
    99+
    2023-06-08
  • vue实现自动滑动轮播图片
    本文实例为大家分享了vue实现自动滑动轮播图片的具体代码，供大家参考，具体内容如下 效果如图：(悬浮时暂停，移出后自动轮播) ①创建图片滑动轮播组件ImageSlider.vue...
    99+
    2022-11-13
  • 如何使用vue实现轮播图片
    这篇“如何使用vue实现轮播图片”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用vue实现轮播图片”文章吧。效果图案例...
    99+
    2023-07-02
  • 利用CSS实现卡片翻转效果的方法和示例
    在现代的网页设计中，翻转效果是一种常见且炫酷的特效，可以为网页增添一份动感和交互性。利用CSS的转换属性和动画属性，我们可以轻松地实现卡片的翻转效果。本文将介绍一种基础的卡片翻转效果，并提供具体的代码示例供读者参考。卡片翻转效果是指将卡片从...
    99+
    2023-10-21
    CSS 卡片翻转 方法和示例
  • css怎样实现卡片图像翻转效果
    本篇文章为大家展示了css怎样实现卡片图像翻转效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。css翻转图片具体代码示例： 　　HTML代码部分<divc...
    99+
    2022-10-19
  • 利用Vue实现卡牌翻转的特效
    目录前言实现鼠标移入选中效果卡片翻转效果完整代码结语前言 今天是正月初九，也是活动的倒数第二天，复工都三天了，而我三篇春节文章还没写完，实在是太混了！这次带来的是一个春节抽福卡页面，...
    99+
    2022-11-13
  • 使用CSS实现卡片翻转效果的技巧
    使用CSS实现卡片翻转效果的技巧CSS是前端开发中最常用的技术之一，它不仅可以美化页面，还可以实现一些炫酷的特效。其中，卡片翻转效果是一种非常常见且具有吸引力的效果。本文将介绍如何使用CSS来实现卡片翻转效果，并提供具体的代码示例。基本结构...
    99+
    2023-11-21
    CSS卡片翻转效果
  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析
    这篇文章主要为大家展示了“基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于vu...
    99+
    2022-10-19
  • 实现微信小程序中的卡片翻转特效
    实现微信小程序中的卡片翻转特效在微信小程序中，实现卡片翻转特效是一种常见的动画效果，可以提升用户体验和界面交互的吸引力。下面将具体介绍如何在微信小程序中实现卡片翻转的特效，并提供相关代码示例。首先，需要在小程序的页面布局文件中定义两个卡片元...
    99+
    2023-11-21
    卡片翻转 特效 关键词：小程序
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作