VUE:在VUE中实现效果"换一换"功能

 

实现效果：假如有10条数据，分组展示，默认在当前页面展示4个，点击换一批，从第5个开始继续展示，到最后一组，再重新返回到第一组

  data() {
    return {
      qList: [],
      //处理后的list
      newList: [],
      //截取第几组的开始参数
      timeStart: 0,
      //截取第几组的结束参数
      timeEnd: 1,
      //默认为0组
      group: 0,
      //一页展示list数量
      num: 3,
      //点击的次数
      clickNum: 0
    };
  },

​

  <div class="flex-align" @click="change">
        <span>换一批</span>
      </div>

​

 

// 换一批
    change() {
      if (this.qList.length > 4 && this.qList.length > this.num) {
        //点击的时候获取分为几组
        this.listlen();
        //每点击一次记录点击次数
        this.autoIncre();
        this.clear();
        this.renderR();
      }
    },
    // 计算数据的长度，共分为几组，如果不能整除则加1
    listlen() {
      var len = this.qList.length;
      this.group = len / this.num;
      if (len % this.num != 0) {
        this.group = parseInt(this.group) + 1;
      }
    },
    //计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数，则重新开始计数。
    clear() {
      if (this.clickNum > this.group - 1) {
        this.timeStart = 0;
        this.timeEnd = 1;
        this.clickNum = 0;
      }
    },
    //每点击一次，记录次数
    autoIncre() {
      this.clickNum++;
      this.timeStart++;
      this.timeEnd++;
    },
    //截取当前每组的数据
    renderR() {
      this.newList = this.qList.slice(
        this.num * this.timeStart,
        this.num * this.timeEnd
      );
      console.log(this.newList);
    }
  },

//获取总数据
  created() {
    let params = {
      keyword: ""
    };
    this.$https("get", "/xxx/xxx", params)
      .then(res => {
        var data = res.data.data;
        this.qList = data;
        this.renderR();
      })
      .catch(err => {
       
      });
  }