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;
            }
        },
        // 将数据改变成第一页的数据，然后第二页数据从第一页的开头开始，每次截取几个，开始默认

}