生成二维数组的一个小应用

最近在写美团demo的时候，发现生成一个二维数组对实现某些需求十分便利！比如美团app首页的图标分类：

       

上边这个分类可以左右滑动，像轮播图一样；一页只能展示8个图标，超出8个展示在下一页；如果让你做，你会怎么做呢？？？

 

切入正题：

其实，类似于上边这种需求使用二维数组非常好解决，我们可以把第一页看做是一个数组，数组里边有8个图标；如果图标数量超出8个，多余的放在第二个数组中，也就是第二页；如果第二页图标数量超出8个，多余放在第三个数组，也就是第三页，以此类推··· ···

如果你理解了上边的大体思路，那么我们只需要考虑如何把图标数量与页数相结合。其实也很简单，后台传过来的所有图标数据统一放在一个数组中，所有图标的下标（索引）除以 每一页图标的数量即可得到一共有多少页数！然后把每一页对应的数据push到对应的数组即可。。。下边还是用代码讲解下：

function gereratePage(iconList){
    let pages = [];
    iconList.forEach((item,index)=>{
        let page = Math.floor(index/8);
        if( !pages[page] ){
            pages[page] = []; 
        }
        pages[page].push(item)
    })
    return pages
}
gereratePage(iconList)

上边代码，假设每一页最多有8个图标，iconList是所有图标组成的数组，遍历数组中每一个元素，我们让数组每个元素的下标除以8，向下取整；第一次遍历，page为0，if判断为true，会在pages数组中创建一个数组（pages[0]=[ ]），然后想pages[0]数组中push第一个元素（图标）;从第二次循环到index索引小于8，page都为0，在这过程中不会走if判断，会直接在pages[0]这个数组中push元素（图标），简单讲，就是数组下标为0-到7的元素会被push到pages[0]这个数组中。

当index索引大于等于8小于16时，page都为1，数组下标为8-到15的元素会被push到pages[1]这个数组中··· ··· 以此类推。

在项目中的应用（vue）

<template>
  <swiper :options="swiperOption">
    <!--swiper-slide表示有多少页-->
      <swiper-slide v-for="(page,index) of gereratePage" :key="index">
    <!--下边遍历的是每一页的图标-->
         <div class="icon" v-for="item of page" :key="item.id">
            <img :src='item.imgUrl' alt="" class="icon-img"/>
            <p class="title">{{ item.desc }}</p>
         </div>
      </swiper-slide>
   </swiper>
</template>

<script>
export default{
   name : "myicons",
   data(){
      return {
         // 添加小点
         swiperOption : {
           pagination : '.swiper-pagination',
           loop : false ,//让我们这个轮播插件支持循环
         }  
      }
   },
   props : {
      iconList : Array //从父组件中传过来的iconList数组数据
   },
   //我们用计算属性，计算出图标的数量和页数
   computed:{
      gereratePage(){
        let pages = [];
        this.iconList.forEach((item,index)=>{
            let page = Math.floor(index/8);
            if( !pages[page] ){
               pages[page] = []; 
            }
            pages[page].push(item)
        })
        return pages 
      }
   }
}
</script>

上边代码，父组件通过axios获取到的数据传给子组件，数据通过计算通过siwper插件渲染到页面，这里正好也介绍了swiper插件在vue中的使用，只需要在最外层标签swiper 上绑定options属性，值为swiperOption，在data中给swiperOption配置参数即可！！！