金刚区计算个数效果实现

目录

Object.values

forEach语法：

---

 先看实现效果：

 

一个轮播效果中有两组金刚区

 在计算属性中写入以下代码：

    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中的每一项

 即可渲染

外层轮播需要遍历一个八个一个两个的轮播页

在每页轮播中渲染两个数组中的数据