<template><div><div style="background: #f6f7f9; height: 12px; width: 100%"></div><div class="resource-box"><div class="circleResources-header"><p>发现圈子</p><p @click="changeCircle" class="refrsh">换一换</p></div><div class="cricle-rbox"><div v-for="item in newList" :key="item"><div class="cricle-card"><img src="" alt="" /><p class="c-title white_ellipsis">家有萌宠萌宠成</p><p class="c-info">潮趣·智趣·驾趣</p><div class="like-box">关注{{item }}</div></div></div></div></div><div style="background: #f6f7f9; height: 12px; width: 100%"></div></div></template><script>import BaswSubhead from "@c/BaswSubhead/BaswSubhead";export default {components: {BaswSubhead },data() {return {qList: [1, 2, 3, 4, 5, 6, 7, 8, 9],//处理后的listnewList: [],//截取第几组的开始参数timeStart: 0,//截取第几组的结束参数timeEnd: 1,//默认为0组group: 0,//一页展示list数量num: 4,//点击的次数clickNum: 0,};},created() {this.renderR();},methods: {// 换一批changeCircle() {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);},},};</script><style lang="scss" scoped>::-webkit-scrollbar {width: 0 !important;}.circleResources-header {display: flex;align-items: center;justify-content: space-between;font-size: rem(18);font-family: HYQiHei-FZS, HYQiHei;font-weight: normal;color: #333333;line-height: rem(26);.refrsh {font-size: rem(14);font-family: HYQiHei-FZS, HYQiHei;font-weight: normal;color: #00b0f0;line-height: rem(14);margin-right: rem(16);}}.resource-box {margin-left: rem(17);padding: rem(16) rem(0) rem(0) rem(0);position: relative;}.cricle-rbox {display: flex;box-sizing: border-box;white-space: normal;overflow-x: auto;margin-left: rem(-12);padding: rem(16) rem(0) rem(24) rem(12);.white_ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.cricle-card {display: flex;flex-direction: column;align-items: center;width: rem(118);height: rem(182);background: #ffffff;box-shadow: 0px 2px 14px 0px rgba(0, 30, 80, 0.02),0px 7px 18px 0px rgba(0, 30, 80, 0.03);border-radius: 4px;padding: rem(16) rem(11);box-sizing: border-box;margin: auto;margin-right: rem(12);img {width: rem(56);height: rem(55);background: skyblue;border-radius: 50%;margin-bottom: rem(14);}.c-title {width: 96px;font-size: rem(16);font-family: HYQiHei-FZS, HYQiHei;font-weight: normal;color: #3c484d;line-height: rem(16);}.c-info {font-size: rem(12);font-family: HYQiHei-FZS, HYQiHei;font-weight: normal;color: #96a3a8;line-height: rem(12);margin: rem(8) 0 rem(16) 0;}.like-box {width: rem(64);height: rem(30);border-radius: rem(30);border: 1px solid #00b0f0;line-height: rem(30);text-align: center;font-size: rem(14);color: #00b0f0;}}}</style>
