| 本文主要介绍了vue实现两列水平时间轴的示例代码，分享给大家，具体如下： 
先上图，主要实现两列水平时间轴，查看了很多人实现的，水平只有一列，并且elementUI的时间轴只有竖着的，不支持横向，最后只能含泪自己实现了，没想到还可以，只是如果数据很多翻页还没实现，有实现过这种的掘友可以艾特我一下。
一、实现组件timelineH.vue
timelineH.vue中的H代表横，起名字烦恼，哈哈。
<template> <ul class="timelineHengBox"> <li class="timelineHengItem" v-for="(item,index) in timelineList" :key="index" :style="{left: index % 2 != 0 ? (liHalf*index)+52+'px':0,'border-right': index == timelineList.length - 2 ?'1px solid #FEFEFE' : 'none'}"> <div class="timeline_dot" :style="{top: index % 2 != 0 ? '-5px' : '93px'}"></div> <div class="timeline_dot" v-show="index == timelineList.length - 2" style="right: -6px;top:93px;left: unset;"></div> <div class="timeline_wapper flex" :class="{'mt20': index % 2 != 0}"> <img src="../../static/img/excelIcon.png" class="bjIcon" :style="{'margin': index % 2 != 0 ? '11px 44px 0 42px' :''}"> <div>{{item.content}}</div> </div> <div class="timelineDate_bottom" :style="{'top': index % 2 != 0 ? '-20px' : '103px'}">{{item.dateTime}}</div> </li> </ul></template><script> export default { name: 'timelineH', props: { timelineList: { type: Array, default: [] } }, data () { return { liWidth: 496,//整个li的宽度，要和下面的li样式统一 liHalf: 248,//这里是li一半的宽度，使中间横线上的点可以找到准确的位置 } } }</script><style scoped> .timelineHengBox { color: #fff; margin: 0; padding: 0 26px; width: 92%; padding-top: 18px; padding-bottom: 10px; margin-left: 26px; height: 87px; border-bottom: 3px solid #FEFEFE; } .timelineHengItem { list-style: none; height: 97px; width: 496px; border-left: 1px solid #FEFEFE; float: left; border-bottom: 3px solid #FEFEFE; position: relative; } .timelineHengItem:nth-child(2n) { position: absolute; left: 248px; border-bottom: 0; top: 115px; } .timeline_dot { width: 10px; height: 11px; background: #FEFEFE; position: absolute; left: -5px; top: 93px; } .timeline_dot:nth-child(2n) { top: -7px; } .timeline_wapper { width: 400px; text-align: left; font-size: 12px; color: #FFFFFF; line-height: 20px; } .mt20 { margin-top: 20px; } .bjIcon { width: 32px; height: 32px; margin: 31px 44px 0 42px; } .timelineDate_bottom { width: 80px; height: 20px; position: absolute; top: 103px; left: -60px; text-align: left; font-size: 14px; font-weight: bold; color: #FFBA00; margin-left: 77px; }</style>实现思路： - 竖线的实现，通过li设置左边框实现，这里主要是要吧每第二个li放到前一个li的中间去，所以要设置li整个宽度的一半用绝对定位left实现，距离顶部的距离也要计算好。
- 每个时间点的方块通过绝对定位实现，需要注意的是上面列的节点和下面列的节点距离top是不一样的，所以我用了css的:nth-child(2n)实现每第二个li的top距离。
- 最后就是日期节点文字，也是判断li的奇偶数设置不同的top值
- 因为没有翻页功能，所以li的长度要做适配或者数据量多要把li的宽度减少，不然数据量多就很不好看，暂时没有优化，但是如果是适应笔记本电脑还是可以通过修改li的宽度和lihalf来实现。
二、调用组件
<div class="timelineHengContainer"> <timelineH :timelineList='timelineList' /></div> js：
import timelineH from "@/components/timelineH.vue";components: { timelineH},data() { return { timelineList: [ { dateTime: '2021-09', content: '欢迎挖矿，天天挖矿，得到矿石，哈哈哈,欢迎挖矿，天天挖矿，得到矿石，哈哈哈,欢迎挖矿，天天挖矿，得到矿石，哈哈哈,欢迎挖矿，天天挖矿，得到矿石，哈哈哈。' },{ dateTime: '2021-10', content: '冬天要注意保暖，太冷了呢,冬天要注意保暖，太冷了呢，冬天要注意保暖，太冷了呢，冬天要注意保暖，太冷了呢。' },{ dateTime: '2021-11', content: '更文挑战三十天正式开始啦，我想要投影仪，一直想买的。' },{ dateTime: '2021-12', content: '就要到月底啦，新的一年开始，新年快乐，新的一年开始，新年快乐，新的一年开始，新年快乐。' } ] }}css:
.timelineHengContainer { width: 100%; height: 227px; background-image: url('../../static/img/timelineBg.png'); background-size: 100% 100%; background-repeat: no-repeat;}好啦，这就实现了水平两列的时间轴了，可以把代码复制下来直接用（使用CV大法吧~）。当时弄了两天，参考了elementui的纵向时间轴的画法，没有做出来，又用纯div和css实现也没有成功，主要是两列的竖线不知道该怎么画，还有节点，最后想起用li直接加个边框实现。 到此这篇关于vue实现两列水平时间轴的示例代码的文章就介绍到这了,更多相关vue 两列水平时间轴内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript懒加载详解
angularjs循环对象属性实现动态列的思路详解 |
