この記事では主に、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; } </スタイル> 実装のアイデア:
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません
この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...
MySQL はよく使われるオープンソースのデータベース ソフトウェアですが、初めてのユーザーにはあま...
1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...
制約制約によりデータの整合性と一貫性が確保される制約はテーブルレベルの制約と列レベルの制約に分けられ...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...
外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...
目次背景解決策1アイデア:コード:解決策2アイデア:要約する参照する背景日付と時間をフォーマットする...
1. LVM の概要Linux ディスクを管理するときに、このような状況に遭遇することがよくあります...
序文: ietester でドキュメント コードを表示するには、debugbar を使用します。すべ...
Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...
検索ページ: search.wxml ページ: <view class="form&...
目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...
序文休日は終わっていますが、それは別の形で(お腹に触れることで)私たちに現れます。ミニプログラムでデ...
Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...
目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...