Vue를 사용하여 타임라인을 구현하는 방법은 무엇입니까?-View.js-php.cn

Vue를 사용하여 타임라인을 구현하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-06-25 14:21:32

원래의

5002명이 탐색했습니다.

소셜 네트워크 및 기타 플랫폼의 인기로 인해 타임라인은 점차 사람들이 자신의 삶의 경험을 공유하는 인기 있는 형식이 되었습니다. 타임라인은 사람들이 과거를 검토하고 역사를 이해하는 데 도움이 되도록 일련의 이벤트나 활동을 시간순으로 표시할 수 있으며, 개인 성장, 여행 일기, 팀 프로젝트 진행 상황 등을 표시하는 데에도 사용할 수 있습니다.

웹 개발에서 타임라인을 표시하려면 Vue 프레임워크를 사용하여 빠르게 빌드하고 효과를 얻을 수 있습니다. Vue를 사용하여 타임라인을 구현하는 방법을 알아봅시다.

1. 페이지 레이아웃

타임라인은 일반적으로 세로 타임라인과 가로 타임라인의 두 가지 형태로 나뉩니다. 수평 타임라인은 일반적으로 특정 기간 내의 일련의 이벤트를 표시하는 반면, 수직 타임라인은 타임라인과 유사하게 이벤트를 시간순으로 표시합니다.

이 기사에서는 세로 타임라인을 예로 들어 보겠습니다. 먼저 디자인 초안에 따라 페이지 레이아웃 코드를 작성해야 합니다.

<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 지시문을 사용하여 페이지의 데이터를 반복하고 {{}}를 사용하여 데이터를 페이지에 바인딩합니다. 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. 애니메이션 효과 구현

사용자 경험을 높이기 위해 각 이벤트에 애니메이션 효과를 추가할 수 있습니다. 현재 이벤트 콘텐츠를 표시할지 여부를 식별하려면 data의 list 속성에 새 속성 isShow를 추가하세요.

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

로그인 후 복사

다음으로 각 이벤트에 클릭 이벤트를 추가하여 현재 이벤트 콘텐츠의 표시 및 숨기기를 제어할 수 있습니다. 여기서는 Vue의 이벤트 핸들러와 class 바인딩을 사용해야 합니다. 🎜rrreee🎜class 속성에 판단을 추가할 수 있습니다. 현재 item.isShow가 true이면 show 클래스를 추가하고, 그렇지 않으면 추가하지 마세요. 이를 통해 이벤트 내용의 표시 및 숨기기를 실현합니다. 🎜rrreee🎜위 코드를 통해 가장 기본적인 타임라인 컴포넌트를 구현할 수 있습니다. 🎜🎜마지막으로 전체 코드를 붙여넣기만 하면 됩니다. 🎜아아아아

위 내용은 Vue를 사용하여 타임라인을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!