驴友网图标区域逻辑实现——（多个图标轮播，以及动态加载图标内容）

本章节对应课程7-5中的内容
教程中使用swiper这个插件，我使用走马灯效果。

1.如何灵活处理图标内容

1.首先在data（）{} 中列出所有的数据
2.使用computed计算属性
根据其他的属性计算出来的一组新的结果，自带缓存，一般会定义一个函数来计算这个属性。
解释下面的一段代码

    pages () {
      const pages = []
      this.iconsList.forEach((item,index)=>{
      })
    }

每一个data返回的列表数据，都带有一个forEach()方法，传递进来的参数，第一个是指返回单具体想，第二个是指返回项的下标。
在coputed里面我们判断，当前图标位于哪一个page里面，
3.在Chrome浏览器官网上下载一个插件，
在更多工具中选择扩展程序

如何封装stylus的一组公用属性

这种情况出现的原因是可能有一组css样式在跟多元素中会用到，所以可以抽离出来。
1.在自己的styles文件新建一个mixins.styl
2.用一个方法封装自己想要共同使用的stylus

//mixins.styl
ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow ellipsis

3.在需要使用的地方引入。然后使用

<style lang="stylus" scoped>
@import '~style/varibles.styl';
@import '~style/mixins.styl'; //在这里引入
    .icon-desc
      position absolute
      left 0
      right 0
      bottom 0
      height .44rem
      line-height .44rem
      color $darkTextColor
      ellipsis() //在这里使用

与线上同步