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ミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

MySQL 5.x の文字化け問題の解決方法

MySQL はよく使われるオープンソースのデータベース ソフトウェアですが、初めてのユーザーにはあま...

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...

MySQL 制約の種類と例

制約制約によりデータの整合性と一貫性が確保される制約はテーブルレベルの制約と列レベルの制約に分けられ...

HTML は Double 11 クーポン取得を実装します (クーポン取得ページを開く時間を設定します)

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...

MySQL の 2 種類の一時テーブルの使用方法の詳細な説明

外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...

js の通常形式の日付と時刻に 0 を自動的に追加する 2 つのソリューション

目次背景解決策1アイデア:コード:解決策2アイデア:要約する参照する背景日付と時間をフォーマットする...

Linux ディスク管理 LVM の使用

1. LVM の概要Linux ディスクを管理するときに、このような状況に遭遇することがよくあります...

IE6/7 は混乱するだろう: 空のテキスト ノードの高さの問題

序文: ietester でドキュメント コードを表示するには、debugbar を使用します。すべ...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文休日は終わっていますが、それは別の形で(お腹に触れることで)私たちに現れます。ミニプログラムでデ...

Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する

Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...

MySQL 8.0.22 zip圧縮パッケージ版(無料インストール)のダウンロード、インストール、および構成手順の詳細

目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...