Vue之如何实现图标轮播效果

需求详解

我们常在各大app上看到图标轮播的效果。那么下图的这个功能是如何实现的呢？

 

具体实现

首先，我们要在js中定义一个数组，然后在里面存放各个功能的名称和图标地址

然后再写一个计算属性computed，用来帮助我们处理图标和图片的轮播显示。

计算属性自带缓存机制，当这个方法被调用时，每页最多会显示8个图标

  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

最后，在HTML中我们进行如下绑定即可让功能生效

<template>
  <div class="icons">

    <swiper>
      <swiper-slide v-for="(page, index) of pages" :key="index">
    <div class="icon" v-for="item of page" :key="item.id">
    <div class="icon-img">
      <img class='icon-img-content' :src='item.imgUrl'>
    </div>
      <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>