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

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

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

这是旧版本： 组件为slider

<template>
 <div class="slider" ref="slider">
  <div class="slider-group" ref="slidergroup">
   <slot>
   </slot>
  </div>
  <div class="dots">
   <span class="dot" :class="{active: currentpageindex === index }" v-for="(item, index) in dots" :key="item.id"></span>
  </div>
 </div>
</template>
<script type="text/ecmascript-6">
import { addclass } from "common/js/dom";
import bscroll from "better-scroll";
export default {
 name: "slider",
 props: {
  loop: {
   type: boolean,
   default: true
  },
  autoplay: {
   type: boolean,
   default: true
  },
  interval: {
   type: number,
   default: 4000
  }
 },
 data() {
  return {
   dots: [],
   currentpageindex: 0
  };
 },
 mounted() {
  settimeout(() => {
   this._setsliderwidth();
   this._initdots();
   this._initslider();
   if (this.autoplay) {
    this._play();
   }
  }, 20);
  window.addeventlistener("resize", () => {
   if (!this.slider) {
    return;
   }
   this._setsliderwidth(true);
   this.slider.refresh();
  });
 },
 activated() {
  if (this.autoplay) {
   this._play();
  }
 },
 deactivated() {
  cleartimeout(this.timer);
 },
 beforedestroy() {
  cleartimeout(this.timer);
 },
 methods: {
  _setsliderwidth(isresize) {
   this.children = this.$refs.slidergroup.children;
   let width = 0;
   let sliderwidth = this.$refs.slider.clientwidth;
   for (let i = 0; i < this.children.length; i++) {
    let child = this.children[i];
    addclass(child, "slider-item");
    child.style.width = sliderwidth + "px";
    width += sliderwidth;
   }
   if (this.loop && !isresize) {
    width += 2 * sliderwidth;
   }
   this.$refs.slidergroup.style.width = width + "px";
  },
  _initslider() {
   // better-scroll 对外暴露了一个 bscroll 的类
   // vue.js 提供了我们一个获取 dom 对象的接口—— vm.$refs
   this.slider = new bscroll(this.$refs.slider, {
    scrollx: true,
    scrolly: false,
    momentum: false,
    snap: true,
    snaploop: this.loop,
    snapthreshold: 0.3,
    snapspeed: 400
   });
   // 是否派发滚动到底部事件，用于上拉加载
  // 切换到下一张的时候派发的事件
   this.slider.on("scrollend", () => {
    let pageindex = this.slider.getcurrentpage().pagex;
    if (this.loop) {
     pageindex -= 1;
    }
    this.currentpageindex = pageindex;
    if (this.autoplay) {
     this._play();
    }
   });
   // 是否派发列表滚动开始的事件
   this.slider.on("beforescrollstart", () => {
    if (this.autoplay) {
     cleartimeout(this.timer);
    }
   });
  },
  _initdots() {
   this.dots = new array(this.children.length);
  },
  _play() {
   let pageindex = this.currentpageindex + 1;
   if (this.loop) {
    pageindex += 1;
   }
   this.timer = settimeout(() => {
    this.slider.gotopage(pageindex, 0, 400);
   }, this.interval);
  }
 }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@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;
   }
  }
 }
}
</style>

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

<template>
  <div class="slide" ref="slide">
    <div class="slide-group" ref="slidegroup">
      <slot>
      </slot>
    </div>
    <div v-if="showdot" class="dots">
      <span class="dot" :class="{active: currentpageindex === index }" v-for="(item, index) in dots" :key="index"></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { addclass } from "common/js/dom";
import bscroll from "better-scroll";
// const component_name = "slide";
export default {
//  name: component_name,
 props: {
  loop: {
   type: boolean,
   default: true
  },
  autoplay: {
   type: boolean,
   default: true
  },
  interval: {
   type: number,
   default: 4000
  },
  showdot: {
   type: boolean,
   default: true
  },
  click: {
   type: boolean,
   default: true
  },
  threshold: {
   type: number,
   default: 0.3
  },
  speed: {
   type: number,
   default: 400
  }
 },
 data() {
  return {
   dots: [],
   currentpageindex: 0
  };
 },
 mounted() {
  this.update();
  window.addeventlistener("resize", () => {
   if (!this.slide || !this.slide.enabled) {
    return;
   }
   cleartimeout(this.resizetimer);
   this.resizetimer = settimeout(() => {
    if (this.slide.isintransition) {
     this._onscrollend();
    } else {
     if (this.autoplay) {
      this._play();
     }
    }
    this.refresh();
   }, 60);
  });
 },
 activated() {
  if (!this.slide) {
   return;
  }
  this.slide.enable();
  let pageindex = this.slide.getcurrentpage().pagex;
  this.slide.gotopage(pageindex, 0, 0);
  this.currentpageindex = pageindex;
  if (this.autoplay) {
   this._play();
  }
 },
 deactivated() {
  this.slide.disable();
  cleartimeout(this.timer);
 },
 beforedestroy() {
  this.slide.disable();
  cleartimeout(this.timer);
 },
 methods: {
  update() {
   if (this.slide) {
    this.slide.destroy();
   }
   this.$nexttick(() => {
    this.init();
   });
  },
  refresh() {
   this._setslidewidth(true);
   this.slide.refresh();
  },
  prev() {
   this.slide.prev();
  },
  next() {
   this.slide.next();
  },
  init() {
   cleartimeout(this.timer);
   this.currentpageindex = 0;
   this._setslidewidth();
   if (this.showdot) {
    this._initdots();
   }
   this._initslide();
   if (this.autoplay) {
    this._play();
   }
  },
  _setslidewidth(isresize) {
   this.children = this.$refs.slidegroup.children;
   let width = 0;
   let slidewidth = this.$refs.slide.clientwidth;
   for (let i = 0; i < this.children.length; i++) {
    let child = this.children[i];
    addclass(child, "slide-item");
    child.style.width = slidewidth + "px";
    width += slidewidth;
   }
   if (this.loop && !isresize) {
    width += 2 * slidewidth;
   }
   this.$refs.slidegroup.style.width = width + "px";
  },
  _initslide() {
   console.log(this.threshold);
   this.slide = new bscroll(this.$refs.slide, {
    scrollx: true,
    scrolly: false,
    momentum: false,
    snap: {
     loop: this.loop,
     threshold: this.threshold,
     speed: this.speed
    },
    bounce: false,
    stoppropagation: true,
    click: this.click
   });
   

　　this.slide.on("scrollend", this._onscrollend);
   this.slide.on("touchend", () => {
    if (this.autoplay) {
     this._play();
    }
   });
   this.slide.on("beforescrollstart", () => {
    if (this.autoplay) {
     cleartimeout(this.timer);
    }
   });
  },
  _onscrollend() {
   let pageindex = this.slide.getcurrentpage().pagex;
   this.currentpageindex = pageindex;
   if (this.autoplay) {
    this._play();
   }
  },
  _initdots() {
   this.dots = new array(this.children.length);
  },
  _play() {
   cleartimeout(this.timer);
   this.timer = settimeout(() => {
    this.slide.next();
   }, this.interval);
  }
 },
 watch: {
  loop() {
   this.update();
  },
  autoplay() {
   this.update();
  },
  speed() {
   this.update();
  },
  threshold() {
   this.update();
  }
 }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@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;
      }
    }
  }
}
</style>

可参考官方文档：

总结

以上所述是小编给大家介绍的vue-music 使用better-scroll遇到轮播图不能自动轮播问题，希望对大家有所帮助