Vueを使用してタイムラインを実装するにはどうすればよいですか?

ソーシャル ネットワークやその他のプラットフォームの人気により、タイムラインは人々が自分の人生経験を共有するための形式として徐々に普及してきました。タイムラインは、人々が過去を振り返り、歴史を理解するのに役立つように、一連のイベントや活動を時系列で表示することができ、また、個人の成長、旅行日記、チーム プロジェクトの進捗状況などを表示するためにも使用できます。

Web 開発でタイムラインを表示したい場合は、Vue フレームワークを使用して迅速に構築し、その効果を実現できます。 Vue を使用してタイムラインを実装する方法を学びましょう。

1. ページ レイアウト

タイムラインは通常、垂直タイムラインと水平タイムラインの 2 つの形式に分けられます。一般に、水平タイムラインには特定の期間内の一連のイベントが表示され、垂直タイムラインにはタイムラインと同様にイベントが時系列に表示されます。

この記事では、垂直タイムラインを例として取り上げます。まず、デザイン ドラフトに従って、ページ レイアウト コードを記述する必要があります。

<div class="timeline">
  <div class="timeline-header">
    <div class="timeline-header-line"></div>
  </div>
  <div class="timeline-container">
      <div class="timeline-item">
        <div class="timeline-item-time">2010年</div>
        <div class="timeline-item-content">content 1</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2012年</div>
        <div class="timeline-item-content">content 2</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2015年</div>
        <div class="timeline-item-content">content 3</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2017年</div>
        <div class="timeline-item-content">content 4</div>
      </div>
  </div>
</div>

スタイルをより適切に表示するために、次を使用しました。フレックスレイアウトはこちら。

2. データの定義とレンダリング

次に、Vue インスタンスでデータを定義し、そのデータをページにレンダリングする必要があります。

new Vue({
  el: '#app',
  data: {
    list: [
      {
        time: '2010年',
        content: 'content 1'
      },
      {
        time: '2012年',
        content: 'content 2'
      },
      {
        time: '2015年',
        content: 'content 3'
      },
      {
        time: '2017年',
        content: 'content 4'
      }
    ]
  }
})

次に、v-for ディレクティブを使用してページ上のデータをループし、{{}} を使用してデータをページにバインドします。

<div class="timeline-item" v-for="item in list">
  <div class="timeline-item-time">{{ item.time }}</div>
  <div class="timeline-item-content">{{ item.content }}</div>
</div>

3. アニメーション効果の実装

ユーザー エクスペリエンスを向上させるために、各イベントにアニメーション効果を追加できます。新しい属性 isShow を data の list 属性に追加して、現在のイベントのコンテンツを表示するかどうかを指定します。

data: {
  list: [
    {
      time: '2010年',
      content: 'content 1',
      isShow: false
    },
    {
      time: '2012年',
      content: 'content 2',
      isShow: false
    },
    {
      time: '2015年',
      content: 'content 3',
      isShow: false
    },
    {
      time: '2017年',
      content: 'content 4',
      isShow: false
    }
  ]
}

次に、クリック イベントを各イベントに追加して、現在のイベント コンテンツの表示と非表示を制御できます。ここでは、Vue のイベント ハンドラーと class バインディングを使用する必要があります。

<div class="timeline-item" v-for="(item, index) in list" :key="index">
  <div class="timeline-item-time" @click="item.isShow = !item.isShow">
    {{ item.time }}
  </div>
  <div class="timeline-item-content" :class="{show: item.isShow}">{{ item.content }}</div>
</div>

class 属性に判定を追加できます。現在の item.isShow が true の場合は、show クラスを追加します。それ以外の場合は、クラスを追加しません。これにより、イベント内容の表示・非表示が可能になります。

.timeline-item-content {
  display:none;
  height: 0;
  transition:all .3s linear;
}
.show {
  display:block;
  height: auto;
}

最も基本的なタイムライン コンポーネントは、上記のコードを通じて実装できます。

最後に、完全なコードを貼り付けるだけです。

以上がVueを使用してタイムラインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。