Vue はカードフリップカルーセル表示を実装します

Vue はカードフリップカルーセル表示を実装します

Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は次のとおりです。

効果とコード

コード:

<テンプレート>
  <div class="リストコンテナ">
    <div class="reason" v-if="リスト1.length > 0 || リスト2.length > 0">
      <div class="logo">
        <svg-icon class="center-svg" icon-class="centerLogo"></svg-icon>
        <div class="echart">
          <echart :option="オプション" echartId="道路P" />
        </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>
</テンプレート>
<スクリプト>
  'vue' から、defineComponent、inject、onMounted、reactive、onUnmounted、toRefs } をインポートします。
  '@/apis/fullView' から {congestionPredict } をインポートします。
  '@/components/common/echart' から echart をインポートします。
  '@/assets/icons/fullView/westToEast.svg' をインポートします。
  '@/assets/icons/fullView/eastToWest.svg' をインポートします。
  '@/assets/icons/fullView/northToSouth.svg' をインポートします。
  '@/assets/icons/fullView/southToNorth.svg' をインポートします。
  '@/assets/icons/fullView/centerLogo.svg' をインポートします。
  '@/views/fullView/left/RoadComponent' から RoadComponent をインポートします。
  エクスポートデフォルトdefineComponent({
    名前: 'RoadP'、
    コンポーネント: { echart, RoadComponent },
    設定() {
      echarts = inject('ec'); とします。
      constデータマップ = リアクティブ({
        間隔: null、
        間隔1: null、
        リスト1: [],
        リスト2: [],
        リスト: [],
        オプション: {}、
        タイムアウト: 10,
        表示1: 'ブロック'、
        表示2: 'なし'、
        表示3: 'ブロック'、
        表示4: 'なし'、
        show5: 'ブロック',
        表示6: 'なし'、
      });
      マウント時(() => {
        データを取得します。
        dataMap.interval = setInterval(() => {
          データを取得します。
        }, 60 * 1000);
        dataMap.interval1 = setInterval(() => {
          (dataMap.timeout > 8 && dataMap.timeout < 11) の場合 {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'ブロック';
            dataMap.show3 = 'ブロック';
            dataMap.show5 = 'ブロック';
            dataMap.show2 = 'なし';
            dataMap.show4 = 'なし';
            dataMap.show6 = 'なし';
          } そうでない場合 (dataMap.timeout === 8) {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'なし';
            dataMap.show3 = 'ブロック';
            dataMap.show5 = 'ブロック';
            dataMap.show2 = 'ブロック';
            dataMap.show4 = 'なし';
            dataMap.show6 = 'なし';
          } そうでない場合 (dataMap.timeout === 7) {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'なし';
            dataMap.show3 = 'なし';
            dataMap.show5 = 'ブロック';
            dataMap.show2 = 'ブロック';
            dataMap.show4 = 'ブロック';
            dataMap.show6 = 'なし';
          } そうでない場合 (dataMap.timeout < 7 && dataMap.timeout > 3) {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'なし';
            dataMap.show3 = 'なし';
            dataMap.show5 = 'なし';
            dataMap.show2 = 'ブロック';
            dataMap.show4 = 'ブロック';
            dataMap.show6 = 'ブロック';
          } そうでない場合 (dataMap.timeout === 3) {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'ブロック';
            dataMap.show3 = 'なし';
            dataMap.show5 = 'なし';
            dataMap.show2 = 'なし';
            dataMap.show4 = 'ブロック';
            dataMap.show6 = 'ブロック';
          } そうでない場合 (dataMap.timeout === 2) {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'ブロック';
            dataMap.show3 = 'ブロック';
            dataMap.show5 = 'なし';
            dataMap.show2 = 'なし';
            dataMap.show4 = 'なし';
            dataMap.show6 = 'ブロック';
          } そうでない場合 (dataMap.timeout === 1) {
            データマップのタイムアウト = データマップのタイムアウト - 1;
            dataMap.show1 = 'ブロック';
            dataMap.show3 = 'ブロック';
            dataMap.show5 = 'ブロック';
            dataMap.show2 = 'なし';
            dataMap.show4 = 'なし';
            dataMap.show6 = 'なし';
          } それ以外 {
            データマップのタイムアウト = 10;
          }
        }, 1000);
      });
      マウント解除時(() => {
        間隔をクリアします(dataMap.interval);
        間隔をクリアします(dataMap.interval1);
      });
      定数getData = () => {
        輻輳予測()
          .then((res) => {
            res && res.code === 0 && res.data の場合 {
              データマップ.list1 = [];
              データマップ.list2 = [];
              (i = 0、i < 6、i = i + 2 とします) {
                データマップ.list1.push([
                  {
                    名前: res.data[i].name,
                    方向: res.data[i].direction、
                    値: res.data[i].index.toFixed(1)、
                    アイコン: res.data[i].englishDirection、
                  },
                  {
                    名前: res.data[i + 1].name,
                    方向: res.data[i + 1].direction、
                    値: res.data[i + 1].index.toFixed(1)、
                    アイコン: res.data[i + 1].englishDirection、
                  },
                ]);
              }
              (j = res.data.length - 1、j > res.data.length - 6、j = j - 2 とします) {
                データマップ.list2.push([
                  {
                    名前: res.data[j].name,
                    方向: res.data[j].direction、
                    値: res.data[j].index.toFixed(1)、
                    アイコン: res.data[j].englishDirection、
                  },
                  {
                    名前: res.data[j - 1].name、
                    方向: res.data[j - 1].direction、
                    値: res.data[j - 1].index.toFixed(1)、
                    アイコン: res.data[j - 1].englishDirection、
                  },
                ]);
              }
            }
          })
          .catch((エラー) => {
            コンソールログ(エラー);
          })
          .finally(() => {
            dataMap.option = getOption();
          });
      };

      定数getOption = () => {
        戻る {
          シリーズ: [
            {
              タイプ: 'liquidFill',
              名前: ''、
              半径: '85%',
              中央: ['50%', '45%'],
              データ: [0.55, 0.5, 0.5],
              色: ['rgba(0,118,255,0.5)', 'rgba(0,102,255,0.5)', 'rgba(0,185,255,0.6)'],
              アウトライン: {
                表示: 偽、
              },
              背景スタイル: {
                色: '透明'、
                境界線の色: '透明'、
                境界線の幅: 1,
                影の色: '透明'、
                影ぼかし: 0,
              },
              ラベル: {
                表示: 偽、
              },
            },
          ]、
        };
      };
      戻る {
        ...toRefs(データマップ)、
      };
    },
  });
</スクリプト>
<style スコープ lang="less">
  .リストコンテナ{
    幅: 100%;
    高さ: 280px;
  }
  。理由 {
    幅: 696ピクセル;
    マージン: 16px 自動;
    高さ: 228px;
    位置: 相対的;
    リストスタイル: なし;
    .ロゴ {
      幅: 150ピクセル;
      高さ: 150px;
      位置: 絶対;
      左: 0;
      右: 0;
      上: 0;
      下部: 0;
      マージン: 自動;
      背景: url('~@/assets/img/fullView/centerGround.dynamic.png');
      背景サイズ: 100% 100%;
    }
    .echart{
      幅: 158ピクセル;
      高さ: 158px;
      位置: 絶対;
      左: -4px;
      上: 4px;
    }
  }
  .center-svg {
    幅: 90ピクセル;
    高さ: 100px;
    位置: 絶対;
    左: 30px;
    上: 25px;
    zインデックス: 15;
  }
</スタイル>

カードのコンポーネント

<テンプレート>
  <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">{{ リスト[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>
</テンプレート>
<スクリプト>
  'vue' から defineComponent をインポートします。

  エクスポートデフォルトdefineComponent({
    名前: 'RoadComponent',
    小道具: {
      リスト: {},
    },
    設定() {
      const switchColor = (値) => {
        値 > 0 && 値 <= 2 の場合 {
          '#00DBEB' を返します。
        } それ以外の場合 (値 > 2 && 値 <= 3) {
          '#FFD200' を返します。
        } それ以外の場合 (値 > 3 && 値 <= 4) {
          '#FF7309' を返します。
        } それ以外の場合 (値 > 4 && 値 <= 5) {
          '#FF0000' を返します。
        }
      };
      戻る {
        スイッチカラー、
      };
    },
  });
</スクリプト>
<style lang="less" スコープ>
  .戻る{
    変換スタイル: 3D を保持します。
    アニメーション: 0.5 秒戻る リニア 1;
  }
  .back:hover {
    アニメーション再生状態: 一時停止;
  }
  @keyframes 戻る {
    0% {
      変換: rotateZ(0deg) rotateY(0deg) rotateX(-90deg);
    }
    100% {
      変換: rotateZ(0deg) rotateY(0deg) rotateX(0deg);
    }
  }
  .span-コンテナ{
    幅: 150ピクセル;
    マージン: 0 0 5px 5px;
    色: var(--text-blue);
    フォントサイズ: var(--font-traffic-size);
  }
  .svg {
    幅: 41ピクセル;
    高さ: 41px;
  }
  .トップ{
    ディスプレイ: フレックス;
    flex-wrap: nowrap;
    パディング: 0 20px;
    マージン: 0 0 14px 0;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
    高さ: 68px;
    境界線の半径: 10px;
    不透明度: 0.9;
    背景: 線形グラデーション(
      89度、
      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 {
    幅: 640ピクセル;
    ディスプレイ: フレックス;
    テキスト配置: 中央;
    アイテムの位置を中央揃えにします。
    flex-wrap: nowrap;
    コンテンツの両端揃え: スペースの間;
    & > div {
      幅: 160ピクセル;
      スパン {
        左マージン: 15px;
      }
    }
    。索引 {
      幅: 155ピクセル;
      高さ: 28px;
      フォントサイズ: var(--font-size-chart-title);
      テキスト配置: 中央;
      マージン: 0;
      行の高さ: 28px;
    }
  }
</スタイル>

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。

素晴らしいトピックの共有: jQuery 画像カルーセル JavaScript 画像カルーセル Bootstrap 画像カルーセル

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue はクリックフリップ効果を実現します
  • Vue.js は大画面のデジタルスクロールと反転効果を実現します
  • Vue 画像閲覧コンポーネント v-viewer 使用状況分析 [回転、拡大縮小、反転などの操作をサポート]
  • Vue iview 複数の画像、大きな画像のプレビュー、ズーム、反転
  • Vueはカードフリップ効果を実現します

<<:  mysql 5.7.17 winx64.zip インストールと設定方法のグラフィックチュートリアル

>>:  docker compose サービスの起動順序を制御する方法

推薦する

Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス

目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...

CSS 配送先住所平行四辺形線スタイルの例コード

コードは次のようになります。 // 配送先住所の平行四辺形の線のスタイル <view clas...

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...

MySQLが日付フィールドインデックスを使用しない理由の要約

目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

UbuntuのVimにNERDTreeプラグインをインストールする詳細な手順

NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...

Dockerイメージの階層化の原理の詳細な説明

ベースイメージベースイメージには 2 つの意味があります。他のイメージに依存せず、ゼロから構築します...

Linux ifconfig コマンドの使用

1. コマンドの紹介ifconfig (ネットワーク インターフェイスを構成する) コマンドは、ネッ...

Nginx の負荷分散アルゴリズムとフェイルオーバー分析

概要Nginx ロード バランシングは、アップストリーム サーバー (実際のビジネス ロジックによっ...

ubuntu20.04 上の CLion2020.1.3 での ROS のインストールと設定の詳細な説明

1. CLionをダウンロード、インストール、アクティベートするオンラインで提供されるチュートリアル...

vue.config.js からプロジェクト最適化までの vue2.x 構成

目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...

不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive...

ウェブページサイズに関する調査

<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...

MySQL関連のツールをいくつかお勧めします

序文:インターネット技術の継続的な発展に伴い、MySQL 関連のエコシステムはますます充実し、ますま...

Docker可視化管理ツールであるDocker UIの使用

1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...