tab定时点击切换

方法：

• 1 动态生成数据 先要知道当前页面需要几条数据，根据后端返回数据进行截取
• 2 当点击不同的index时显示的高亮效果
• 3 定时器设置

html部分

<div class="duty-view">
            <block-title><lang>排班安排</lang></block-title>
            <div v-if="!isEmpty"  @mouseenter="_onMouseEnter" @mouseleave="_onMouseLeave" class="sip-screen-part part">
                <div class="duty-item inline" v-for="(item,index) in curShowData" :key="index">
                    <div class="duty-bg inline">
                        <img src="./img/city.svg" alt="">
                    </div>
                    <div class="duty-text inline">
                        <div class="company">{{item.origin}}</div>
                        <div class="person">值班人：{{item.person}}</div>
                    </div>
                </div>
            </div>
            <div class="tab_change">
                <span
                v-for="(tab,index) in cupRankData"
                :key="index"
                class="duty_tab-item inline"
                :class="{ active: curActiveTab === index+1 }"
                @click="clickTab(index+1)"
                >
            </span>
            </div>
            
            <blank-mask v-if="isEmpty"><lang>暂无数据</lang></blank-mask>
        </div>

script部分

//定义每页指定几条数据
const PAGE_NUM = 6;
//定义定时器几秒触发
const TOGGLE_INTERVAL = 5 * 1000;
//data里面定义
data() {
        return {
                 isEmpty=false;
                 isHover: false,
                 curActiveTab: 1,
//这个动态根据后端数据生成几个span按钮
                 pageTotal:[],
//模拟后端数据
               	rankData:[
                {origin: '综合单位1',person: 'azhu'},
                {origin: '综合单位2',person: 'yi1'},
                {origin: '综合单位3',person: 'yi2'},
                {origin: '综合单位4',person: 'yi3'},
                {origin: '综合单位5',person: 'yi4'},
                {origin: '综合单位6',person: 'yi5'},
                {origin: '综合单位7',person: 'yi6'},
                {origin: '综合单位8',person: 'yi7'},
                {origin: '综合单位9',person: 'yi8'},
                {origin: '综合单位10',person: 'yi9'},
                {origin: '综合单位11',person: 'yi10'},
                {origin: '综合单位12',person: 'yi11'},
                {origin: '综合单位13',person: 'yi12'},
                {origin: '综合单位14',person: 'yi12'},
                {origin: '综合单位15',person: 'yi12'},
                {origin: '综合单位16',person: 'yi12'},
                ]
       	 }
	}
}，

computed：{
       //动态生成下面span效果
         cupRankData() {
            this.pageTotal=Math.ceil(this.rankData.length / PAGE_NUM)
            return this.pageTotal
        },
        //六个数据的截取
        curShowData() {       
            let start = (this.curActiveTab - 1) * PAGE_NUM;
            return this.rankData.slice(start, start + PAGE_NUM);
        },
mounted(){
        //定时器
        this.timer = setInterval(() => this._togglePage(), TOGGLE_INTERVAL);
    },
methods：{
//点击切换数据
         clickTab(key) {
            if (this.curActiveTab === key) {
                return;
            }
            this.curActiveTab = key;
        },
_onMouseEnter() {
            this.isHover = true;
        },
        _onMouseLeave() {
            this.isHover = false;
        },
// 如果移动到当即的页面的话，就让他不显示，如果移开的话，就显示滑动效果
        _togglePage() {
            if (this.isHover) {
                return;
            }
            if(this.curActiveTab < 3){
                this.curActiveTab = this.curActiveTab + 1;
            }else{
                this.curActiveTab = 1;
            }
        },
        // 将数据改变成第一页的数据，然后第二页数据从第一页的开头开始，每次截取几个，开始默认
}