Vue+swiperでタイムライン効果を実現

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果:

まず、Taobao イメージがある場合は、cnpm install swiper --save を使用します。Taobao イメージがない場合は、npm install swiper --save を使用します。

<テンプレート>
  <div class="hello" style="高さ:100%;幅:100%;位置:相対;">
    <div class="swiperlist">
      <div class="スワイパー">
        <div class="スワイパーコンテナ">
          <div class="スワイパーラッパー">
            <div class="swiper-slide" v-for="(activity, index) in superurl" :key="index">
              <div style="padding-left: 4px;">
                <div class="step-line"></div>
                <div class="step-content">
                  <div class="ステップ数"></div>
                  <div class="sub_title">{{activity.img}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="buttom" v-if="superurl.length>2">
          <div class="スワイパーボタン前"></div>
          <div class="スワイパーボタン-次へ"></div>
        </div>
      </div>
    </div>
  </div>
</テンプレート>
<スクリプト>
「swiper」からSwiperをインポートします。
"../../../../../node_modules/swiper/css/swiper.min.css"をインポートします。
「./baseMap.vue」からbaseMapをインポートします。
"../../../../../static/mapbox/css/map.css"をインポートします。
エクスポートデフォルト{
  名前:「マップ」、
  コンポーネント:
    ベースマップ
  },
  データ() {
    戻る {
      スーパーURL: [
        {
          URL: "",
          画像: "2019-01"
        },
        {
          URL: "",
          画像: "2019-02"
        },
        {
          URL: "",
          画像: "2019-03"
        },
        {
          URL: "",
          画像: "2019-04"
        },
        {
          URL: "",
          画像: "2019-05"
        },
        {
          URL: "",
          画像: "2019-06"
        }
      ]
    };
  },
  時計: {}、
  メソッド: {},
  マウント() {
    var mySwiper = 新しいSwiper(".swiper-container", {
      slidesPerView: 3, // 3 つのスライドを表示します centeredSlides: true, // true に設定すると、アクティブなスライドはデフォルトの左ではなく中央に配置されます。
      centerInsufficientSlides: true, // このパラメータをオンにします。スライドの合計数が slidesPerView より少ない場合、スライドは中央に配置されます。ループモードとslidesPerColumnには適用されません
      centeredSlidesBounds: true, // 最初のスライドと最後のスライドが常に端に収まるようにします。
      // loop: true, // loop // autoplay: true, // autoplay direction: "vertical", // 垂直画面ナビゲーション: {
        nextEl: ".swiper-button-next",
        前へ: ".swiper-button-prev"
      }
    });
  }
};
</スクリプト>
<スタイルスコープ>
.スワイパーリスト{
  幅: 90ピクセル;
  高さ: 256px;
  位置: 絶対;
  背景: #f5f5f5;
  左: 5px;
  上: 205px;
  オーバーフロー: 非表示;
  パディング: 32px 0;
  境界線の半径: 6px;
}
.スワイパー{
  幅: 100%;
  高さ: 250px;
  オーバーフロー: 非表示;
}
.スワイパーコンテナ{
  高さ: 250px !重要;
}
.スワイパースライドアクティブ{
  色: #3a70ca;
}
.スワイパーボタン前へ、
.swiper-container-rtl .swiper-button-next {
  左: 28px;
  右: 自動;
  上: 15px;
  変換: 回転(90度);
  色: #3a70ca;
}
.スワイパーボタン次へ、
.swiper-container-rtl .swiper-button-prev {
  トップ:94%
  変換: 回転(90度);
  左: 28px;
  色: #3a70ca;
}
.swiper-button-next:後、
.swiper-button-prev:after {
  フォントサイズ: 25px;
}
.sub_title {
  左マージン: 15px;
  上マージン: -19px;
}
.ステップ数 {
  表示: インラインブロック;
  高さ: 2px;
  幅: 2px;
  色: #fff;
  背景色: #3a70ca;
  行の高さ: 30px;
  境界線の半径: 50%;
  テキスト配置: 中央;
  境界線: 2px実線 #3a70ca;
  上マージン: 36px;
}
.ステップ番号:後{
  コンテンツ: "";
  幅: 2px;
  高さ: 84px;
  左境界線: 1.5px 点線 #3a70ca;
  /* 背景色: #3a70ca; */
  位置: 絶対;
  上: 0px;
  左マージン: -1px;
}
</スタイル>

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

以下もご興味があるかもしれません:
  • Vueは水平タイムラインを実装する
  • Vueはタイムライン機能を実装する
  • 2列の水平タイムラインを実装するためのVueサンプルコード
  • VUEはタイムライン再生コンポーネントを実装します
  • vue+canvasでタイムラインを描く方法
  • Vue.jsはタイムライン機能を実装します
  • Vueは物流タイムライン効果を実現します
  • Vue タイムライン vue-light-timeline 使用方法
  • Vueは移動可能な水平タイムラインを実装します
  • Vueはタイムライン効果を実装する

<<:  Zabbixリモートコマンド実行の詳細な例

>>:  MySQL の自動増分 ID に関するいくつかの小さな問題の要約

推薦する

HTML テーブルタグチュートリアル (8): 背景画像属性 BACKGROUND

テーブルの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できます。基本的...

vue-pdf はオンラインファイルプレビューを実現します

この記事では、参考までに、ファイルのオンラインプレビューを実現するためのvue-pdfの具体的なコー...

Linux の ufw ファイアウォールの紹介

Linux のufw (Uncomplicated Firewall) を見て、ファイアウォールに変...

CSSでカスタムフォント(font-face)を導入する方法の詳細な説明

なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

Vue.jsの機能コンポーネントに関する包括的な理解

目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...

HTML チュートリアル: よく使われる HTML タグのコレクション (5)

関連記事:初心者が学ぶ HTML タグ (4)導入された HTML タグは、必ずしも XHTML 仕...

js 正規表現の先読みと後読み、および非キャプチャグループ化

目次先読みと後読みをキャプチャグループと組み合わせる捕獲グループと非捕獲グループ前を向いて、後ろを振...

MySQL サーバー 5.7.20 のインストールと設定方法のグラフィック チュートリアル

この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...

Docker で php-nginx-alpine イメージをゼロから構築する方法

これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...

数千万のデータを扱うMySQLのページングクエリのパフォーマンスを最適化する

MySQL のデータ量が多い場合、制限ページングが使用されます。ページ数が増えると、クエリの効率が低...

JDBC 探索 SQLException 分析

1. SQLExceptionの概要JDBC を使用してデータ ソース (この記事のデータ ソースは...

AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策

最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...

lnmp を使用して MySQL データベースのルート パスワードをリセットする 2 つの方法

最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...