Vue实现根据时间线展示内容及次级小卡片菜单：

1、小卡片资料显示：

需求：
	1、左右按钮功能
	2、默认显示6个

解决：

//法一：

<template>
   <ul class="issue-list">
      <li class="arrows" @click="prevBtn"><</li>
      <li class="arrows" @click="nextBtn">></li>
      <li
         v-for="item in showTitleList"  :key="item.id"
         //遍历时，不能是titleList（存放全部数据的数组），要改成showTitleList（存储显示数据）
         //:class="tabsId == item.id ? 'issue-item-active' : ''"//点击时，切换active样式
         //@click="tabsId = item.id" //点击时，切换选中的id样式
       >
         {{ item.title }}
      </li>
   </ul>
</template>

<script>
export default {
  data() {
    return {
      tabsId: 1,//默认选中第一个
      titleList: [],//存放全部数据
      showTitleList: [],//存放显示的数据
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {//获取初始化数据
      getData().then(res=>{
      	this.titleList=res.data.data
      	this.titleList.forEach((item, i) => {
        	if (this.showTitleList.length < 6) {// tabs显示多少个,这一步不能少
          		this.showTitleList.push(item);
        	}
      	});
      })
    },
    prevBtn() {//点击左边
      if(this.showTitleList.length < 6){
      	this.$message.warning('左侧到头了')
        return false;
      }
      if (this.titleList[0].id == this.showTitleList[0].id) {
      	//id为唯一标识符，可以有title，time等
      	this.$message.warning('左侧到头了')
        return false;
      } else {
        let vid = this.showTitleList[0].id;
        this.titleList.forEach((item, i) => {
          if (vid == item.id) {
            //删除最后一个tabs
            this.showTitleList.pop(5, 1);
            this.showTitleList.unshift(this.titleList[i - 1]);
          }
        });
      }
    },
    nextBtn() {//点击右箭头
      if(this.showTitleList.length < 6){
      	this.$message.warning('右侧到头了')
        return false;
      }
      if (this.titleList[this.titleList.length - 1].id == this.showTitleList[5].id) {
      	this.$message.warning('右侧到头了')
        return false;
      } else {
        let vid = this.showTitleList[5].id;
        this.titleList.forEach((item, i) => {
          if (vid ==item.id) {
            this.showTitleList.shift(0, 1);
            this.showTitleList.push(this.titleList[i + 1]);
          }
        });
      }
    },
  },
};
</script>

push()尾部添加  	pop()尾部删除  	unshift()头部添加  	shift()头部删除

//法二：（轮播图）

<template>
   <ul class="issue-list">
      <el-button class="arrows" @click="prevBtn"><</el-button>
      <el-button class="arrows" @click="nextBtn">></el-button>

	  <el-carousel arrow="never" :loop="false" :autoplay="false" ref="carousel"
	  indicator-position="none" height="100px">
	  	<el-carousel-item v-for="(item,index) in groupCount" :key="index">
	  		<div v-for="(tmd,k) in item" :key="k">
	  			<div>{{tmd.title}}</div>
	  			<div>{{tmd.count}}</div>
	  		</div>
	  	</el-carousel-item>
	  </el-carousel>
   </ul>
</template>

<script>
export default {
  data() {
    return {
      titleList: [],//存放全部数据
    };
  },
  mounted() {
    this.getInfo();
  },
  computed:{
  	 groupCount(){
  	 	let ary =JSON.parse(JSON.stringfiy(this.titleList))
  	 	let len=ary.length
  	 	let n=6;//自定义每页展示多少条
  	 	let lineNum=len%n==0?len/n:Math.floor((len/n)+1)
  	 	let res=[]
  	 	for(let i=0;i<lineNum;i++){
  	 	  let temp=(i+1)==lineNum?ary.splice(0,ary.length):ary.splice(0,n)
  	 	  res.push(JSON.parse(JSON.stringify(temp)))
  	 	}
  	 	return res
  	 }
  },
  methods: {
    getInfo() {//获取初始化数据
      getData().then(res=>{
      	this.titleList=res.data.data
      })
    },
    prevBtn() {//点击左边
      if(this.showTitleList.length < 6){
      	this.$message.warning('左侧到头了')
        return false;
      }
      
    },
    nextBtn() {//点击右箭头
      if(this.showTitleList.length < 6){
      	this.$message.warning('右侧到头了')
        return false;
      }
      
    },
  },
};
</script>

2、时间线发展顺序展示：

需求：
	1、左右按钮功能
	2、默认显示8个

解决：

<template>
   <ul class="issue-list">
      <li class="arrows" @click="prevBtn"><</li>
      <li class="arrows" @click="nextBtn">></li>
      <li
         v-for="item in showTitleList"  :key="item.id"
         //遍历时，不能是titleList（存放全部数据的数组），要改成showTitleList（存储显示数据）
         //:class="tabsId == item.id ? 'issue-item-active' : ''"//点击时，切换active样式
         //@click="tabsId = item.id" //点击时，切换选中的id样式
       >
         {{ item.time}}
      </li>
   </ul>
</template>

<script>
export default {
  data() {
    return {
      tabsId: 1,//默认选中第一个
      allList: [],//存放全部数据
      showList: [],//存放显示的数据
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {//获取初始化数据
      getData().then(res=>{
      	this.allList=res.data.data
      	this.allList.forEach((item, i) => {
        	if (this.showList.length < 8) {// tabs显示多少个,这一步不能少
          		this.showList.push(item);
        	}
      	});
      })
    },
    prevBtn() {//点击左边
      if(this.showList.length < 8){
      	this.$message.warning('左侧到头了')
        return false;
      }
      if (this.allList[0].time == this.showList[0].time ) {
      	//id为唯一标识符，可以有title，time等
      	this.$message.warning('左侧到头了')
        return false;
      } else {
        let vid = this.showList[0].time;
        this.allList.forEach((item, i) => {
          if (vid == item.time ) {
            //删除最后一个tabs
            this.showList.pop(7, 1);
            this.showList.unshift(this.allList[i - 1]);
          }
        });
      }
    },
    nextBtn() {//点击右箭头
      if(this.showList.length < 8){
      	this.$message.warning('右侧到头了')
        return false;
      }
      if (this.allList[this.allList.length - 1].time == this.showList[7].time ) {
      	this.$message.warning('右侧到头了')
        return false;
      } else {
        let vid = this.showList[7].time ;
        this.allList.forEach((item, i) => {
          if (vid ==item.time ) {
            this.showList.shift(0, 1);
            this.showList.push(this.allList[i + 1]);
          }
        });
      }
    },
  },
};
</script>

3、css实现滚动但隐藏滚动条：

div{
	overflow-x:auto;
	white-space:nowrap;
}
div::-webkit-scrollbar{
	display:none;//隐藏滚动条
}
div::-webkit-scrollbar-bottun{
	//设置滚动按钮的属性
}