vue-music 使用better-scroll遇到轮播图不能自动轮播问题

根据vue-music视频中slider组建的使用，当安装新版本的better-scroll，轮播组件，不能正常轮播

这是因为，better-scroll发布新版本之后，参数设置发生改变

这是旧版本： 组件为slider

@import '~common/stylus/variable';
.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;
   }
  }
 }
}

 下面是版本升级之后，做出的变化

@import '../../common/stylus/variable';

.slide {
  min-height: 1px;

  .slide-group {
    position: relative;
    overflow: hidden;
    white-space: nowrap;

    .slide-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;
    transform: translateZ(1px);
    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;
      }
    }
  }
}

可参考官方文档：https://github.com/ustbhuangyi/better-scroll/blob/master/example/components/slide/slide.vue

总结

以上所述是小编给大家介绍的vue-music 使用better-scroll遇到轮播图不能自动轮播问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！