<返回更多

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

2021-12-17    Mason程
加入收藏

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

 

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

 

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 => {
        
      });
  }
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>