目录
先看实现效果:
一个轮播效果中有两组金刚区
在计算属性中写入以下代码:
pages() {
var pagge = [];
var index = this.currentIndex;
if (this.newsItems[index]) {
this.newsItems[index].list.forEach((v) => {
console.log(v);
if (v.type === "indexnavs") {
var navsdata = Object.values(v.data);
navsdata.forEach((item, index) => {
var page = Math.floor(index / 8);
if (!pagge[page]) {
pagge[page] = [];
}
pagge[page].push(item);
/* console.log(pagge[page]); */
});
}
});
}
return pagge;
},
遍历后的newsItems[index[.list.forEach((v))如下图所示
之后就要去找金刚区数据在哪,发现是在type类型为indexnavs里
对这十个图片以及文字用Object.values返回一个数组
Object.values
Object.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值。
var navsdata = Object.values(v.data);
console.log(navsdata);
用forEack进行遍历
forEach语法:
[].forEach(function(value,index,array){})
navsdata.forEach((item, index) => {
console.log(item,index);
});
接下来就是计算一个轮播中所需的个数(八个一组)
var page = Math.floor(index / 8);
之后对pagge[page]进行判断,如果里面获取不到值那么就给他新创建一个数组
if (!pagge[page]) {
pagge[page] = [];
}
pagge[page].push(item);
之后把这个item的值push到paggs[page]中即可
在轮播组件中遍历paggs,之后在遍历pages中的每一项
即可渲染
外层轮播需要遍历一个八个一个两个的轮播页
在每页轮播中渲染两个数组中的数据