Wie implementiert man eine Zeitleiste mit Vue?

Mit der Popularität von Plattformen wie sozialen Netzwerken sind Zeitleisten nach und nach zu einer beliebten Form geworden, in der Menschen ihre Lebenserfahrungen teilen können. Die Zeitleiste kann eine Reihe von Ereignissen oder Aktivitäten in chronologischer Reihenfolge anzeigen, um Menschen dabei zu helfen, die Vergangenheit Revue passieren zu lassen und die Geschichte zu verstehen. Sie kann auch verwendet werden, um persönliches Wachstum, Reisetagebücher, Teamprojektfortschritte usw. anzuzeigen.

Wenn Sie in der Webentwicklung die Zeitleiste anzeigen möchten, können Sie das Vue-Framework verwenden, um den Effekt schnell zu erstellen und zu erzielen. Lassen Sie uns lernen, wie Sie Vue zum Implementieren der Zeitleiste verwenden.

1. Seitenlayout

Die Zeitleiste ist normalerweise in zwei Formen unterteilt: vertikale Zeitleiste und horizontale Zeitleiste. Die horizontale Zeitleiste zeigt im Allgemeinen eine Reihe von Ereignissen innerhalb eines bestimmten Zeitraums an, während die vertikale Zeitleiste Ereignisse in chronologischer Reihenfolge anzeigt, ähnlich einer Zeitleiste.

In diesem Artikel wird die vertikale Zeitleiste als Beispiel verwendet. Gemäß dem Designentwurf müssen wir zunächst den Seitenlayoutcode schreiben.

<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>

Um den Stil besser darzustellen, habe ich hier das Flex-Layout verwendet.

2. Daten definieren und rendern

Als nächstes müssen Sie die Daten in der Vue-Instanz definieren und die Daten in die Seite rendern.

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'
      }
    ]
  }
})

Dann verwenden Sie die Anweisung v-for, um die Daten auf der Seite zu durchlaufen, und verwenden Sie {{}}, um die Daten an die Seite zu binden. 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>

三、实现动画效果

为了增加用户体验，我们可以为每个事件添加动画效果。将data中的list属性添加一个新属性isShow，用于标识是否显示当前事件内容。

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为真则添加show

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

3. Animationseffekte implementieren

Um das Benutzererlebnis zu verbessern, können wir jedem Ereignis Animationseffekte hinzufügen. Fügen Sie ein neues Attribut isShow zum Attribut list in data hinzu, um anzugeben, ob der aktuelle Ereignisinhalt angezeigt werden soll.

<div id="app">
  <div class="timeline">
    <div class="timeline-header">
      <div class="timeline-header-line"></div>
    </div>
    <div class="timeline-container">
      <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>
    </div>
  </div>
</div>

<style>
  .timeline {
    position: relative;
    max-width: 1000px;
    margin: 30px auto;
  }

  .timeline-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #ccc;
    transform: translate(-50%, calc(50% - 15px));
  }

  .timeline-header-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 30px;
    background: #ccc;
    transform: translateX(-50%);
    border-radius: 30px;
  }

  .timeline-container {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .timeline-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin-bottom: 50px;
    padding: 0 50px;
    cursor: pointer;
  }

  .timeline-item:after {
    content: '';
    position: absolute;
    top: 12px;
    left: -15px;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
  }

  .timeline-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ccc;
  }

  .timeline-item:after,
  .timeline-item:before {
    z-index: 2;
  }

  .timeline-item-content {
    display: none;
    height: 0;
    transition: all .3s linear;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 10px;
  }

  .timeline-item-time {
    width: 150px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: right;
    flex-shrink: 0;
    margin-right: 20px;
  }

  .show {
    display: block;
    height: auto;
  }
</style>

<script>
  new Vue({
    el: '#app',
    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
        }
      ]
    }
  })
</script>

Als nächstes können Sie jedem Ereignis ein Klickereignis hinzufügen, um die Anzeige und das Ausblenden des aktuellen Ereignisinhalts zu steuern. Hier müssen wir den Ereignishandler und die Klasse-Bindung von Vue verwenden. 🎜rrreee🎜Wir können eine Beurteilung im Attribut class hinzufügen. Wenn die aktuelle item.isShow wahr ist, fügen Sie die Klasse show hinzu, andernfalls nicht es, also Realisieren Sie das Anzeigen und Ausblenden von Ereignisinhalten. 🎜rrreee🎜Die grundlegendste Timeline-Komponente kann über den obigen Code implementiert werden. 🎜🎜Zum Schluss fügen Sie einfach den vollständigen Code ein. 🎜rrreee

Das obige ist der detaillierte Inhalt vonWie implementiert man eine Zeitleiste mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!