Vue实现可移动水平时间轴

1. 引入样式文件

在head标签内引入需要用到的样式文件，例如：

<head>
  <link rel="stylesheet" href="timeline.css">
</head>

2. 组件的结构

要实现一个时间轴，我们需要用到一个列表（<ul>），每个列表项（<li>）代表一个时间节点，包含时间信息和相关内容。我们可以使用Vue的组件特性将这些节点封装起来，例如：

<template>
  <ul class="timeline">
    <li v-for="(item, index) in timelineItems" :key="index">
      <h2>{{ item.date }}</h2>
      <p>{{ item.content }}</p>
    </li>
  </ul>
</template>

3. 样式的设置

样式文件是根据上述的组件结构进行编写的。我们可以定义整体的样式、列表项的样式、每个节点上时间和内容的样式等。例如：

.timeline {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 60px 0;
}

.timeline li {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  text-align: center;
}

.timeline li:before,
.timeline li:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

.timeline li:before {
  left: -15px;
  background-color: #ffffff;
  border: 2px solid #4f86c6;
  z-index: 1;
}

.timeline li:after {
  right: -15px;
  background-color: #4f86c6;
}

.timeline li h2 {
  margin-top: 0;
  color: #333333;
  font-size: 18px;
  font-weight: 400;
}

.timeline li p {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 0;
  color: #666666;
  margin-top: 20px;
}

4. 事件监听与处理

时间轴需要能够左右移动，我们可以在组件中监听用户的鼠标滚轮事件并进行响应。可以使用wheel事件监听用户鼠标滚轮的上下滑动，例如：

<script>
  export default {
    data() {
      return {
        timelineItems: [], // 时间轴节点数据
        currentIndex: 0, // 当前滑动位置对应的节点索引
      }
    },
    mounted() {
      // 监听wheel事件
      window.addEventListener("wheel", this.handleWheel);
    },
    destroyed() {
      // 移除监听
      window.removeEventListener("wheel", this.handleWheel);
    },
    methods: {
      handleWheel(event) {
        // 判断鼠标滚轮事件是上滑还是下滑
        const delta = Math.sign(event.deltaY);
        if (
          (this.currentIndex === 0 && delta < 0) || // 到达时间轴的起点时禁止上滑
          (this.currentIndex === this.timelineItems.length - 1 && delta > 0)
        ) {
          // 到达时间轴的终点时禁止下滑
          return;
        }
        // 根据滑动方向更新当前节点索引
        this.currentIndex += delta;
      },
    }
  }
</script>

5. 计算属性的设置

我们需要根据currentIndex计算出当前可视区域中应该显示的节点。可以在组件中定义computed属性计算这个节点列表，例如：

<script>
  export default {
    data() {
      return {
        timelineItems: [], // 时间轴节点数据
        currentIndex: 0, // 当前滑动位置对应的节点索引
      }
    },
    computed: {
      visibleItems() {
        let start = this.currentIndex - 2;
        start = start < 0 ? 0 : start;
        let end = start + 4;
        end = end > this.timelineItems.length ? this.timelineItems.length : end;
        return this.timelineItems.slice(start, end);
      },
    }
  }
</script>

6. 组件的渲染

根据visibleItems渲染节点列表。我们可以将上一步中计算出的列表项组成一个新的列表传递给模板代码进行渲染，例如：

<template>
  <ul class="timeline">
    <li v-for="(item, index) in visibleItems" :key="index">
      <h2>{{ item.date }}</h2>
      <p>{{ item.content }}</p>
    </li>
  </ul>
</template>

示例1：基础示例

<template>
  <div>
    <h1>Vue实现可移动水平时间轴</h1>
    <timeline :timelineItems="timelineItems"></timeline>
  </div>
</template>

<script>
import timeline from "./timeline.vue";

export default {
  components: {
    timeline,
  },
  data() {
    return {
      timelineItems: [
        {
          date: "2021-03-01",
          content:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae risus pulvinar, dapibus est at, finibus tellus.",
        },
        {
          date: "2021-04-01",
          content:
            "Aliquam erat volutpat. Morbi laoreet sem eu odio efficitur, ac faucibus sapien faucibus.",
        },
        {
          date: "2021-05-01",
          content:
            "Nam bibendum diam sit amet quam hendrerit, vel rhoncus nibh semper.",
        },
        {
          date: "2021-06-01",
          content:
            "Maecenas nec erat nibh. Aliquam erat volutpat. Praesent tincidunt ac velit in lobortis.",
        },
        {
          date: "2021-07-01",
          content:
            "Curabitur sed nulla sodales, sagittis ligula at, tincidunt dolor. Ut a ipsum laoreet, tristique velit non, placerat felis.",
        },
        {
          date: "2021-08-01",
          content:
            "Aenean rhoncus nulla in elementum ullamcorper. Nunc nec diam lobortis, accumsan diam in, aliquet velit.",
        },
        {
          date: "2021-09-01",
          content:
            "Pellentesque at nunc eget magna tristique dapibus. Fusce lobortis nibh enim.",
        },
        {
          date: "2021-10-01",
          content:
            "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
        },
        {
          date: "2021-11-01",
          content:
            "Vestibulum nec bibendum risus. Nunc tincidunt elit in nisl finibus condimentum.",
        },
        {
          date: "2021-12-01",
          content:
            "Sed varius erat ut commodo fringilla. Aenean hendrerit, sem in rutrum tincidunt, velit mi tempus eros, vel tempus libero sapien a velit.",
        },
      ],
    };
  },
};
</script>

该示例代码中，我们定义了一个timeline组件，并将一个包含10个节点的时间轴数据传递给该组件进行渲染。

示例2：与后端交互

该示例演示了如何从后端获取时间轴数据并显示在页面中。

<template>
  <div>
    <h1>Vue实现可移动水平时间轴</h1>
    <timeline :timelineItems="timelineItems"></timeline>
  </div>
</template>

<script>
import timeline from "./timeline.vue";
import axios from "axios";

export default {
  components: {
    timeline,
  },
  data() {
    return {
      timelineItems: null, // 时间轴节点数据
    };
  },
  mounted() {
    // 在组件挂载后从后端获取时间轴数据
    axios
      .get("/api/timeline")
      .then((res) => {
        this.timelineItems = res.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
};
</script>

在上述代码中，我们使用axios库从后端获取时间轴数据。在组件挂载后，发送GET请求到/api/timeline路由，获取返回的数据并将其保存到timelineItems属性中，该属性将传递给timeline组件用于渲染。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue实现可移动水平时间轴 - Python技术站

Vue实现可移动水平时间轴