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 を応援していただければ幸いです。

以下もご興味があるかもしれません: