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 サービスの起動順序を制御する方法

推薦する

Linux の fsevents モジュールによって発生する npm ls エラーの解決方法の詳細な説明

Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

MySQL 5.x 以降を使用している場合のエラー #1929 列 ''createtime'' の日付時刻値が正しくありません: '''' の簡単な解決方法

MySQL をインストールした後、テーブル データを保存および削除しようとすると、常にエラー メッセ...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

JavaScriptはスタック構造の詳細なプロセスを実装する

目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

Ubuntu 18.04 のsources.listをAlibabaまたはTsinghuaミラーに変更する方法

1. バックアップソースリストUbuntu のデフォルトのソースは国内サーバーではないため、更新され...

react+antdプロジェクトをゼロから構築する方法を教えます

これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのも...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

JavaScript のマクロタスクとマイクロタスクの詳細

目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....

Chrome 4.0 は GreaseMonkey スクリプトをサポートします

GreaseMokey (中国語では Grease Monkey Script と呼んでいます) は...

MySQL ユーザー変数と set ステートメントの例の詳細な説明

目次1 ユーザー変数の概要2 ユーザー変数の定義3 ユーザー変数の使用3.1 セットを通した例3.2...

Navicat は CSV データを MySQL にインポートします

この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...

MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...

Web面接におけるJS事前解析と変数プロモーションの違い

目次事前分析とは何ですか?変数と関数の準備の違いvar 変数の繰り返し宣言変数と関数の昇格の優先順位...