和正常tab切换一样原理，点击箭头多了步计算
<template><div><div class="tab-container"><p>{{projectName}}</p><div class="banner"><div v-for="(tab, index) in tabs" :key="index" :class="{'active': activeTab === index,'line':true}"></div></div><div class="jt"><i class="el-icon-arrow-left" @click="previousTab()"></i><i class="el-icon-arrow-right" @click="nextTab()"></i></div></div></div>
</template><script>
export default {data () {return {tabs: ['学不会1', '学不会2', '学不会3'],activeTab: 0, // 索引projectName: '' // 名称};},mounted () {this.projectName = this.tabs[0]},methods: {// 上一步previousTab () {this.activeTab = (this.activeTab - 1 + this.tabs.length) % this.tabs.length;this.projectName = this.tabs[this.activeTab]},// 下一步nextTab () {this.activeTab = (this.activeTab + 1) % this.tabs.length;this.projectName = this.tabs[this.activeTab]}}
};
</script><style lang="less" scoped>
.tab-container {height: 300px;display: flex;position: relative;justify-content: center;align-items: center;flex-direction: column;background: #999;p {color: skyblue;}.banner {display: flex;.line {width: 60px;height: 10px;background: #ccc;margin-left: 10px;margin-top: 16px;}}.jt {position: absolute;top: 50%;transform: translate(0, -50%); // 移动元素 x轴，y轴display: flex;width: 100%;justify-content: space-between;padding: 0 10px;cursor: pointer;font-size: 20px;}
}.active {background: skyblue !important;color: skyblue;
}
</style>
