uni-app 时间轴组件

在处理 uni-app 中的时间轴组件时，你可以利用 Vue 框架的特性来创建一个可复用且功能完善的时间轴组件。以下是一个简单的示例，展示如何创建和使用一个时间轴组件。

时间轴组件代码 (Timeline.vue)

<template>
  <div class="timeline">
    <div v-for="(item, index) in items" :key="index" class="timeline-item">
      <div class="timeline-dot"></div>
      <div class="timeline-content">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
        <span class="timeline-time">{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Timeline',
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

<style scoped>
.timeline {
  position: relative;
  padding-left: 20px;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
}

.timeline-content {
  padding: 10px;
  border-left: 2px solid #3498db;
}

.timeline-time {
  color: #999;
  font-size: 12px;
}
</style>

使用时间轴组件 (App.vue)

<template>
  <view>
    <Timeline :items="timelineItems" />
  </view>
</template>

<script>
import Timeline from './components/Timeline.vue';

export default {
  components: {
    Timeline
  },
  data() {
    return {
      timelineItems: [
        { title: 'Event 1', content: 'Description of event 1', time: '2023-10-01' },
        { title: 'Event 2', content: 'Description of event 2', time: '2023-10-05' },
        { title: 'Event 3', content: 'Description of event 3', time: '2023-10-10' }
      ]
    }
  }
}
</script>

这个示例展示了如何创建一个基础的时间轴组件，并在父组件中使用它。时间轴组件接收一个 items 属性，该属性是一个包含事件信息的数组。每个事件对象包含 title、content 和 time 属性。组件通过 v-for 指令遍历 items 数组，为每个事件生成一个时间轴项。样式部分定义了时间轴的布局和样式，使其看起来整洁有序。

你可以根据需要进一步扩展和自定义这个时间轴组件，比如添加更多的样式、动画效果或交互功能。