2列の水平タイムラインを実装するためのVueサンプルコード

2列の水平タイムラインを実装するためのVueサンプルコード

この記事では主に、2列の水平タイムラインを実現するためのVueのサンプルコードを紹介します。

まずは画像を見てみましょう。主に2列の横型タイムラインを実装しています。多くの人が実装したものを見たところ、横型は1列しかありません。しかも、elementUIのタイムラインは縦型のみで、横型には対応していません。結局、涙をのんで自分で実装するしかありませんでした。大丈夫とは思っていませんでした。ただし、データが多い場合のページめくりはまだ実装されていません。これを実装した友人は私にタグ付けしてください。

1.コンポーネントtimelineH.vueを実装する

timelineH.vue の H は水平方向を意味します。名前を付けるのは難しいですね、ハハ。

<テンプレート>
    <ul class="timelineHengBox">
        <li class="timelineHengItem" v-for="(item,index) in timelineList" :key="index" 
            :style="{left: index % 2 != 0 ? (liHalf*index)+52+'px':0,'border-right': index == timelineList.length - 2 ?'1px solid #FEFEFE' : 'none'}">
            <div class="timeline_dot" :style="{top: index % 2 != 0 ? '-5px' : '93px'}"></div>
            <div class="timeline_dot" v-show="index == timelineList.length - 2" style="right: -6px;top:93px;left: unset;"></div>
            <div class="timeline_wapper flex" :class="{'mt20': ​​index % 2 != 0}">
                <img src="../../static/img/excelIcon.png" class="bjIcon" :style="{'margin': index % 2 != 0 ? '11px 44px 0 42px' :''}">
                <div>{{item.content} </div>
            </div>
            <div class="timelineDate_bottom" :style="{'top': index % 2 != 0 ? '-20px' : '103px'}">{{item.dateTime}}</div>
        </li>
    </ul>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        名前: 'timelineH',
        小道具: {
            タイムラインリスト: {
                タイプ: 配列、
                デフォルト: []
            }
        },
        データ () {
            戻る {
                liWidth: 496, // li 全体の幅。下の li のスタイルと一致するようにする liHalf: 248, // これは li の幅の半分で、中央の水平線上の点が正しい位置を見つけられるようにする}
        }
    }
</スクリプト>
<スタイルスコープ>
    .timelineHengBox {
        色: #fff;
        マージン: 0;
        パディング: 0 26px;
        幅: 92%;
        パディング上部: 18px;
        パディング下部: 10px;
        左マージン: 26px;
        高さ: 87px;
        下境界線: 3px 実線 #FEFEFE;
    }
    .timelineHengItem {
        リストスタイル: なし;
        高さ: 97px;
        幅: 496ピクセル;
        左境界線: 1px 実線 #FEFEFE;
        フロート: 左;
        下境界線: 3px 実線 #FEFEFE;
        位置: 相対的;
    }
    .timelineHengItem:n番目の子(2n) {
        位置: 絶対;
        左: 248ピクセル;
        下境界線: 0;
        上: 115px;
    }
    .timeline_dot {
        幅: 10px;
        高さ: 11px;
        背景: #FEFEFE;
        位置: 絶対;
        左: -5px;
        上: 93px;
    }
    .timeline_dot:n番目の子(2n) {
        上: -7px;
    }
    .timeline_wapper {
        幅: 400ピクセル;
        テキスト配置: 左;
        フォントサイズ: 12px;
        色: #FFFFFF;
        行の高さ: 20px;
    }
    .mt20 {
        上マージン: 20px;
    }
    .bjアイコン{
        幅: 32px;
        高さ: 32px;
        マージン: 31px 44px 0 42px;
    }
    .timelineDate_bottom {
        幅: 80ピクセル;
        高さ: 20px;
        位置: 絶対;
        上: 103px;
        左: -60px;
        テキスト配置: 左;
        フォントサイズ: 14px;
        フォントの太さ: 太字;
        色: #FFBA00;
        左マージン: 77px;
    }
</スタイル>

実装のアイデア:

  • 垂直線は、li の左境界を設定することによって実現されます。ここで重要なのは、2 つおきの li を前の li の中央に配置することです。そのため、li 全体の幅の半分を絶対位置の左を使用して設定し、上からの距離も計算する必要があります。
  • 各時点のブロックは絶対位置で実現されています。上列のノードと下列のノードは上からの距離が異なることに注意してください。そのため、CSS:nth-​​child(2n)を使用して、1つおきの上部の距離を実現しました。
  • 最後に、日付ノードのテキストを使用して、li の奇数と偶数を決定し、異なる上位値を設定します。
  • ページめくり機能がないので、データ量が多い場合は li の長さを合わせるか、li の幅を小さくする必要があり、そうしないとデータ量が多いと見栄えが悪くなります。今のところ最適化はありませんが、ラップトップに適応する場合は、li と lihalf の幅を変更することで実現できます。

2. コンポーネントの呼び出し

<div class="timelineHengContainer">
     <timelineH :timelineList='timelineList' />
</div>

js:

「@/components/timelineH.vue」からtimelineHをインポートします。
コンポーネント:
        タイムラインH
},

データ() {
    戻る {
          タイムラインリスト: [

                {
                    日時: '2021-09',
                    内容: 「採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ。」 '
                },{
                    日時: '2021-10',
                    内容: 「冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。」 '
                },{
                    日時: '2021-11',
                    内容: 「30日間の投稿チャレンジが正式に始まりました。プロジェクターが欲しいです。ずっと買いたいと思っていたんです。」 '
                },{
                    日付時刻: '2021-12',
                    内容: 「もうすぐ月末、新しい年が始まります、明けましておめでとうございます、新しい年が始まります、明けましておめでとうございます、新しい年が始まります、明けましておめでとうございます。」 '
                }
            ]
    }
}

css:

.timelineHengコンテナ{
        幅: 100%;
        高さ: 227px;
        背景画像: url('../../static/img/timelineBg.png');
        背景サイズ: 100% 100%;
        背景繰り返し: 繰り返しなし;
}

これで水平2列のタイムラインが実現できました。コードをコピーしてそのまま使えます(CV方式で~)。 2日間かけて取り組みました。elementuiの垂直タイムラインの描画方法を参考にしましたが、失敗しました。純粋なdivとcssで実装することもできませんでした。主な原因は、2つの列とノードの垂直線をどのように描画すればよいかがわからなかったことです。最終的に、liを使用して直接境界線を追加して実現することを考えました。

Vue で 2 列の水平タイムラインを実装するサンプルコードに関するこの記事はこれで終わりです。Vue の 2 列の水平タイムラインに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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

<<:  IE8ブラウザはWebページ標準に完全互換となる

>>:  Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません

推薦する

WeChatミニプログラムをTencent Mapsに接続する2つの方法

最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでい...

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法

この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...

mysql ワイルドカード (sql 高度なフィルタリング)

目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

Linux の PHP に XML 拡張機能をインストールする詳細な手順

PHP Linux に XML 拡張機能をインストールする1. PHPインストールソースパッケージを...

なぜCSSをヘッドタグに配置する必要があるのか

考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...

Mysql ALTER TABLE はフィールドを追加するときにテーブルをロックしますか?

目次MySQL 5.6以前MySQL 5.6以降要約する知らせMySQL 5.6以前更新手順元のテー...

Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

目次Linux ドライバーの共通機能 (copy_from_user open read write...

Dockerコンテナ接続実装手順の分析

一般的に言えば、コンテナが起動した後、ポート マッピングを通じてコン​​テナが提供するサービスを使用...

WeChatアプレット開発の共通機能と使用方法のまとめ

ここでは、主に小さなプログラムの開発プロセスでよく使われる、非常に実用的な機能ポイントをいくつか整理...

大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション

MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...

画像のプリロードと遅延ロードを実装するJavaScript

この記事では、JavaScriptで画像のプリロードと遅延ロードを実装するための具体的なコードを参考...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

Javascriptでオブザーバーモードを実装する方法を教えます

目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...