效果：

?

<template><!--時間線--><div class="timeLine" style="overflow: hidden;"><div class="content"><p class="tit">{{timeLineList[timeIndex].year}}</p><p>{{timeLineList[timeIndex].info}}</p></div><div class="my_timeline_prev" @click="moveLeft"><img src="../../../static/images/case_detail_left.png" class="my_timeline_node"/><div class="my_timeline_item_line" style="margin-top: -18px;"></div><div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">上</div></div><div class="ul_box"><ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;"><li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index"><!--圈圈節點--><div class="my_timeline_node" :style = " {backgroundColor: item.bgcolor, width: item.size + 'px', height: item.size + 'px'}" @click="changeActive(index)" :class="{active: index == timeIndex}"></div><!--線--><div class="my_timeline_item_line"></div><!--標注--><div class="my_timeline_item_content" :style="{color: item.color, fontSize: item.fontsize + 'px'}">{{item.timestamp}}</div></li></ul></div><div class="my_timeline_next" @click="moveRight"><img src="../../../static/images/case_detail_right.png" class="my_timeline_node"/><div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">下</div></div></div> </template><script> export default {name: 'timeLine',data() {return {timeIndex: 2,timeLineList: [{timestamp: '2012年',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',icon: 'el-iconprev',year: '2012',info: 'chengli'}, {timestamp: '2013年',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '2013',info: '工作室更名為：西安拓美網絡科技有限公司'}, {timestamp: '2014年',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '2014',info: '工作室更名為：西安拓美網絡科技有限公司'}, {timestamp: '2015年',color: '#999',fontsize: 18,year: '2015',size: '28',bgcolor: '#e4e7ed',info: '工作室更名為：西安拓美網絡科技有限公司'}, {timestamp: '2016年',color: '#999',fontsize: 18,size: '28',year: '2016',bgcolor: '#e4e7ed',info: '工作室更名為：西安拓美網絡科技有限公司'}, {timestamp: '2017年',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '2017',info: '工作室更名為：西安拓美網絡科技有限公司'}, {timestamp: '2018年',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '2018',info: '工作室更名為：西安拓美網絡科技有限公司'}, {timestamp: '2019年',color: '#999',fontsize: 18,year: '2019',bgcolor: '#e4e7ed',size: '28',info: '工作室更名為：西安拓美網絡科技有限公司'}]}},methods: {changeActive(index) {this.timeIndex = index;},moveLeft() {let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);let listNum = 0;if(marginLeft <= 10 && (marginLeft >= -650)){this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';}},moveRight() {let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);if(marginLeft < (-200)){this.$refs.mytimeline.style.marginLeft = marginLeft + 220 + 'px';}}} } </script><style scoped> .my_timeline_prev, .my_timeline_next {float: left;display: inline-block;background-color: #fff;cursor: pointer; } .my_timeline_prev {width: 200px;float: left; } .my_timeline_next {width: 34px;margin-left: -22px; } .ul_box {width: 900px;height: 60px;display: inline-block;float: left;margin-top: 2px;overflow: hidden; } .my_timeline_item {display: inline-block;width: 220px; } .my_timeline_node {box-sizing: border-box;border-radius: 50%;cursor: pointer; } .my_timeline_node.active {background-color: #fff !important;border: 6px solid #f68720; } .my_timeline_item_line {width: 100%;height: 10px;margin: -14px 0 0 28px;border-top: 2px solid #E4E7ED;border-left: none; } .my_timeline_item_content {margin: 10px 0 0 -10px; } </style>

?

轉載于:https://www.cnblogs.com/duanzhenzhen/p/10937675.html

總結

以上是生活随笔為你收集整理的vue 实现横向时间轴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。