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

 

需求详解

 

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

 

 

 

具体实现

 

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

 

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

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

  computed: {
    pages () {
      const pages = []
      this.iconList.forEa