vue列表实现自动翻页、手动翻页两种情况兼容，类似轮播图效果

需求场景：

1.十条为一组自动翻页，鼠标移入暂停，移除继续

2.手动翻页可以切换上下页，可以查看具体详细信息

---

实现代码：

html：

<div class="listBox">
    <div @mouseenter="clearTableInterval" @mouseleave="setTableInterval">
      <div>
        <el-row :gutter="15">
          <el-col :span="9">地区名称</el-col>
          <el-col :span="15" class="table-row-center">地区信息</el-col>
        </el-row>
      </div>
      <template>
        <div
          v-for="(item, index) in tableData.slice(tablePage * 10,(tablePage + 1) * 10)"
          :key="index"
        >
          <el-row :gutter="15">
            <el-col :span="9">{{ item.pro }}</el-col>
            <el-col :span="18">{{ item.info}}</el-col>
          </el-row>
        </div>
      </template>
    </div>
    <div class="buttonBox">
      <div @click="tablePage==0?'':clickPage(1)" :class="tablePage==0?'disbaleButton':''">
        <span>上一页</span>
      </div>
      <br />
      <div @click="tablePage==3?'':clickPage(2)" :class="tablePage==3?'disbaleButton':''">
        <span>下一页</span>
      </div>
    </div>
  </div>

js：

  methods: {
    handleTableData(type) {
      if (this.type === 1) {
        this.tablePage === 0 ? (this.tablePage = 3) : (this.tablePage -= 1);
      } else {
        this.tablePage = (this.tablePage + 1) % 4;
      }
    },
    clickPage(type) {
      this.type = type;
      this.handleTableData(type);
      this.setTableInterval();
    },
    setTableInterval() {
      this.tableTimer && clearInterval(this.tableTimer);
      if (!this.tableData.length) return;
      this.tableTimer = setInterval(() => {
        this.tablePage = (this.tablePage + 1) % 4;
      }, 5000);
      console.log(this.tablePage, "tablePageInterval");
    },
    clearTableInterval() {
      this.tableTimer && clearInterval(this.tableTimer);
    }
  },



  watch: {
    listData: {
      handler: function(val) {
        this.tableData = val;
        this.tablePage = 0;
        this.setTableInterval();
      },
      deep: true,
      immediate: true
    }
  },

以上可进行参考，欢迎指认错误共同学习！