Comment implémenter une chronologie à l'aide de Vue ?-Voir.js-php.cn

Comment implémenter une chronologie à l'aide de Vue ?

PHPz

Libérer： 2023-06-25 14:21:32

original

5001 Les gens l'ont consulté

Avec la popularité des réseaux sociaux et d'autres plateformes, les chronologies sont progressivement devenues une forme populaire permettant aux gens de partager leurs expériences de vie. La chronologie peut afficher une série d'événements ou d'activités par ordre chronologique pour aider les gens à revoir le passé et à comprendre l'histoire. Elle peut également être utilisée pour afficher la croissance personnelle, les carnets de voyage, l'avancement des projets d'équipe, etc.

Dans le développement Web, si vous souhaitez afficher la chronologie, vous pouvez utiliser le framework Vue pour créer et obtenir rapidement l'effet. Apprenons à utiliser Vue pour implémenter la chronologie.

1. Mise en page

La chronologie est généralement divisée en deux formes : la chronologie verticale et la chronologie horizontale. La chronologie horizontale affiche généralement une série d'événements au cours d'une certaine période de temps, tandis que la chronologie verticale affiche les événements par ordre chronologique, à la manière d'une chronologie.

Cet article prend la chronologie verticale comme exemple. Tout d'abord, selon le brouillon de conception, nous devons écrire le code de mise en page

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

Copier après la connexion

Afin de mieux afficher le style, j'ai utilisé la mise en page flexible ici ;

2. Définir les données et le rendu

Ensuite, vous devez définir les données dans l'instance Vue et restituer les données dans la page.

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

Copier après la connexion

Ensuite, utilisez la directive v-for pour parcourir les données de la page et utilisez {{}} pour lier les données à la page. 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>

Copier après la connexion

三、实现动画效果

为了增加用户体验，我们可以为每个事件添加动画效果。将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
    }
  ]
}

Copier après la connexion

接下来，可以为每个事件添加点击事件，来控制当前事件内容展示和隐藏，这里我们需要用到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>

Copier après la connexion

我们可以在class属性中添加判断，如果当前item.isShow为真则添加show

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

Copier après la connexion

3. Implémenter des effets d'animation

Afin d'augmenter l'expérience utilisateur, nous pouvons ajouter des effets d'animation à chaque événement. Ajoutez un nouvel attribut isShow à l'attribut list dans data pour déterminer s'il faut afficher le contenu de l'événement actuel.

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

Copier après la connexion

Ensuite, vous pouvez ajouter un événement click à chaque événement pour contrôler l'affichage et le masquage du contenu de l'événement actuel. Ici, nous devons utiliser le gestionnaire d'événements de Vue et la liaison class. 🎜rrreee🎜Nous pouvons ajouter du jugement dans l'attribut class. Si le item.isShow actuel est vrai, ajoutez la classe show, sinon n'ajoutez pas. il, réalise ainsi l'affichage et le masquage du contenu de l'événement. 🎜rrreee🎜Le composant de chronologie le plus basique peut être implémenté via le code ci-dessus. 🎜🎜Enfin, collez simplement le code complet. 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!