金刚区计算个数效果实现

简介: 金刚区计算个数效果实现

先看实现效果:

69faeb8bcfbc47eb98343057e667f7cd.png


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

计算属性中写入以下代码:

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))如下图所示

508185724f4c477b8697926af04b825c.png

之后就要去找金刚区数据在哪,发现是在type类型为indexnavs里

9da1b2f891954e51b27c95a1e765f2cd.png

对这十个图片以及文字用Object.values返回一个数组

Object.values

Object.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值。

var navsdata = Object.values(v.data);
            console.log(navsdata);

8bce69d7fb7c424cb2d7debcffc436ed.png

用forEack进行遍历

forEach语法:

[].forEach(function(value,index,array){})
navsdata.forEach((item, index) => {
             console.log(item,index);
            });

7d3f0ef6fccf48b5884ce11c4358be16.png

接下来就是计算一个轮播中所需的个数(八个一组)

var page = Math.floor(index / 8);

faf789fb5bc6437b9bbe925f3eb631c1.png

之后对pagge[page]进行判断,如果里面获取不到值那么就给他新创建一个数组

1e3f1c18aa384cad94d18bd40edf2291.png

if (!pagge[page]) {
    pagge[page] = [];
}
pagge[page].push(item);

之后把这个item的值push到paggs[page]中即可

在轮播组件中遍历paggs,之后在遍历pages中的每一项

711e096bd50641e49f66395df232e215.png

即可渲染

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

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


相关文章
枚举(蓝桥练习)(反倍数、特别数的和、找到最多的数、小蓝的漆房、小蓝和小桥的挑战)
枚举(蓝桥练习)(反倍数、特别数的和、找到最多的数、小蓝的漆房、小蓝和小桥的挑战)
|
10月前
除夕日的每日一题(字符个数统计,多数元素)
除夕日的每日一题(字符个数统计,多数元素)
61 2
day2·算法-快乐数-有效三角形个数
day2·算法-快乐数-有效三角形个数
50 0
|
10月前
每日一题(最大连续1的个数,完全数计算)
每日一题(最大连续1的个数,完全数计算)
47 0
|
10月前
|
每日一题《剑指offer》数组篇之数组中出现次数超过一半的数字
每日一题《剑指offer》数组篇之数组中出现次数超过一半的数字
85 0
每日一题《剑指offer》数组篇之数组中出现次数超过一半的数字
|
10月前
|
每日一题《剑指offer》数组篇之把数组排成最小的数
每日一题《剑指offer》数组篇之把数组排成最小的数
51 0
每日一题《剑指offer》数组篇之把数组排成最小的数
【算法挨揍日记】day06——1004. 最大连续1的个数 III、1658. 将 x 减到 0 的最小操作数
1004. 最大连续1的个数 III 题目描述: 给定一个二进制数组 nums 和一个整数 k,如果可以翻转最多 k 个 0 ,则返回 数组中连续 1 的最大个数 。
432 1
【每日一题Day35】LC1742盒子中小球的最大数量 | 哈希表 找规律
给你两个整数 lowLimit 和 highLimit ,返回放有最多小球的盒子中的小球数量*。*如果有多个盒子都满足放有最多小球,只需返回其中任一盒子的小球数量。
117 0
【每日一题Day35】LC1742盒子中小球的最大数量 | 哈希表 找规律
【CCCC】L2-024 部落 (25分),并查集,统计集合个数
【CCCC】L2-024 部落 (25分),并查集,统计集合个数
145 0
群答疑随手记:花椰妹在纸上写下了若干个连续的正整数,她把这些数遮挡住,只告诉蒜头君一共有k个数,它们的和为n,请蒜头君猜猜纸上是哪些数。现在蒜头君向你求助,帮他解决这个问题。(连续整数和)
群答疑随手记:花椰妹在纸上写下了若干个连续的正整数,她把这些数遮挡住,只告诉蒜头君一共有k个数,它们的和为n,请蒜头君猜猜纸上是哪些数。现在蒜头君向你求助,帮他解决这个问题。(连续整数和)
群答疑随手记:花椰妹在纸上写下了若干个连续的正整数,她把这些数遮挡住,只告诉蒜头君一共有k个数,它们的和为n,请蒜头君猜猜纸上是哪些数。现在蒜头君向你求助,帮他解决这个问题。(连续整数和)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等