5 vue音乐项目(某课)滚动轮播图

在这一节，会封装一些公用的函数来添加classname，改变image的宽度。

具体如下：

首先：封装一个slider的组件

CSS

.slider
    min-height: 1px
    .slider-group
      position: relative
      overflow: hidden
      white-space: nowrap
      .slider-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center
        a
          display: block
          width: 100%
          overflow: hidden
          text-decoration: none
        img
          display: block
          width: 100%
    .dots
      position: absolute
      right: 0
      left: 0
      bottom: 12px
      text-align: center
      font-size: 0
      .dot
        display: inline-block
        margin: 0 4px
        width: 8px
        height: 8px
        border-radius: 50%
        background: $color-text-l
        &.active
          width: 20px
          border-radius: 5px
          background: $color-text-ll

\

遇到的问题：上面这样写完后。slide-item的class名字不能添加上，什么原因。

在这里的问题我反复看了一下，具体的意思如下。

这里就是一个promise返回之后dom插入（promise需要一段时间才有数据），在这之前的事件mounted钩子函数就算延时20ms也执行完了早

解决了。

然后呢，通过betterscroll来让图片轮播：