Vue使用计算属性完成图标区域分页功能

再写vue作品的时候图标区是两页写了九个图标，最终显示到页面上的只有一页，第九个在第三行并且被隐藏了

template代码
只写一个swiper-slide实现分页滑动的功能

<template>
  <div class="icons">
    <!-- 引入swiper实现轮播 -->
    <swiper>
      <swiper-slide>
        <div class='icon' v-for='item of iconList' :key='item.id'>
          <div class='icon-img'>
            <img class='icon-img-icons' :src='item.imgUrl'>
          </div>
          <p class='icon-desc'>{{ item.desc }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

data()部分代码：
使用return是因为：data必须是一个函数，而不能是一个对象，因为一个子组件，它不像根组件只会被调用一次，他可能在不同的地方也被调用了，它对应的数据应该是完整的一套数据，而不应该是共享一套，保证每一个数据都有独立的存储，这样就不会出现多个子组件之间互相影响的情况

data () {
    return {
      iconList: [{
        id: '0001',
        imgUrl: require('@/assets/iconsOne.png'),
        desc: '景点门票'
      }, {
        id: '0002',
        imgUrl: require('@/assets/iconsTwo.png'),
        desc: '滑雪季'
      }, {
        id: '0003',
        imgUrl: require('@/assets/iconsThree.png'),
        desc: '泡温泉'
      }, {
        id: '0004',
        imgUrl: require('@/assets/iconsFour.png'),
        desc: '动植物园'
      }, {
        id: '0006',
        imgUrl: require('@/assets/iconsSix.png'),
        desc: '踏青赏花'
      }, {
        id: '0005',
        imgUrl: require('@/assets/iconsFive.png'),
        desc: '一日游'
      }, {
        id: '0007',
        imgUrl: require('@/assets/iconsSeven.png'),
        desc: '故宫'
      }, {
        id: '0008',
        imgUrl: require('@/assets/iconsNine.png'),
        desc: '溜娃儿'
      }, {
        id: '0009',
        imgUrl: require('@/assets/iconsEight.png'),
        desc: '自然风光'
      }]
    }

为什么要使用计算属性（computed）
计算属性是根据其它得一些属性计算出来，生成一组新的结果，它自带一个缓存得机制，语法还比较简单

在computed下定义一个pages这样的数据

由一个函数pages()返还回来的一个数据

pages () {
      const pages = []
      /*使用 arr.forEach(function(currentValue, index, arr) 对 data里的iconList数组对象 的每一项进行循环，
        循环会接收到两个参数:currentValue是具体的循环项；index是循环项对应的下标
      */
      this.iconList.forEach((item, index) => {
        /**
         * 调用Math.floor()方法向下取整假：
         * 设是第三个数据，index对应的是2，那么page就等于0，凡是0-7的数据都为零，就让他们都展示在第一页上
         * 如果是第九个数据，那么index对应的就是8，page就等于1，然后就让等于1的数据都展示在第二页上
         * ps：相当于创造一个二维数组，每一维里是八个数据
         */
        const page = Math.floor(index / 8)
        /**
         * page算出来做一个判断：
         * 1.判断pages[page]存不存在（pages数组对应的下标里边 有数据就存在，如果没有就不存在）
         *   如果不存在就赋予空数组一直在当前这个下标上添加数据，直到page取下一个数为止
         *   例如：pages[0] 里边有数据就一直添加，一旦page改变为1，那就要再次赋予空数组继续在pages[1]里边添加数据
         */
        if (!pages[page]) {
          pages[page] = []
        }
        // 每一项得数据，添加在对应的pages[page]里
        pages[page].push(item)
      })
      //最后返回 pages数组
      return pages
    }
  }

写完pages函数后对应的template里对应要循环的数组也要更改
之前直接在swiper-slide 里的循环是iconslist ，但现在不是这样了，首先循环到底有多少个轮播页面，这个轮播页面由pages控制

<template>
  <div class="icons">
    <!-- 引入swiper实现轮播 -->
    <swiper>
      <!-- 循环到底有多少个轮播页面 页面由v-for控制-->
      <swiper-slide v-for="(page, index) of pages" :key="index">
        <!-- 这里循环的数据也不是iconList了 是page-->
        <div class='icon' v-for='item of page' :key='item.id'>
          <div class='icon-img'>
            <img class='icon-img-icons' :src='item.imgUrl'>
          </div>
          <p class='icon-desc'>{{ item.desc }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

完成！根据数据项的不同 自动化的去构建页码 然后可以实现多页切换的轮播图的效果