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

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

文章插图

data() {return {qList: [],//处理后的listnewList: [],//截取第几组的开始参数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();}},// 计算数据的长度，共分为几组，如果不能整除则加1listlen() {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 = https://www.isolves.com/it/cxkf/bk/2021-12-17/res.data.data;this.qList = data;this.renderR();}).catch(err => {});}

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