5. Vue music project (a class) scroll wheel playback diagram

In this section, we’ll encapsulate some common functions to add className and change the width of the image.

Details are as follows:

First: Encapsulate a slider component

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
Copy the code

\

Problems encountered: After writing the above. The class name of slide-item could not be added.

I have read over the question here and the specific meaning is as follows.

In this case, the dom is inserted after the return of a promise (the promise takes some time to get the data), and the hook function before that will execute 20ms later

Resolved.

Then, use BetterScroll to rotate the image: