Vue轮播图三

使用better-scroll，来做轮播的效果
组件代码：

<template>
  <div class="slide-banner">
    <div class="banner-wrapper">
      <div class="slide-banner-wrapper" ref="slide">
        <div class="slide-banner-content" ref="slideBannerContent">
          <slot></slot>
        </div>
      </div>
      <div class="dots-wrapper">
        <span
          class="dot"
          v-for="num in nums"
          :key="num"
          :class="{'active': currentPageIndex === (num - 1)}"></span>
      </div>
    </div>
    <div class="btn-wrap">
      <button class="next" @click="nextPage">nextPage</button>
      <button class="prev" @click="prePage">prePage</button>
    </div>
  </div>
</template>


<script>
  import BScroll from '@better-scroll/core'
  import Slide from '@better-scroll/slide'
  BScroll.use(Slide)

  export default {
    name:"SliderDefault",
    props:{
      nums:{
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        currentPageIndex: 0,
        childrendiv:null,
      }
    },
    mounted() {
      this.setClass();
      this.init();
    },
    beforeDestroy() {
      this.slide.destroy();
    },
    methods: {
      hasClass(el, className) {
        let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
        return reg.test(el.className)
      },
      addClass(el, className) {
        if (this.hasClass(el, className)) {
          return
        }
        let newClass = el.className.split(' ')
        newClass.push(className)
        el.className = newClass.join(' ')
      },
      setClass(){
        this.childrendiv = this.$refs.slideBannerContent.children;
        for (let i = 0; i < this.childrendiv.length; i++) {
          let child = this.childrendiv[i]
          this.addClass(child, 'slide-page');
        }
      },
      init() {
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,
          scrollY: false,
          slide: true,
          momentum: false,
          bounce: false,
          probeType: 3,
          click:true
        })
        this.slide.on('scrollEnd', this._onScrollEnd)

        this.slide.on('slideWillChange', (page) => {
          this.currentPageIndex = page.pageX
        })

          // v2.1.0
        this.slide.on('slidePageChanged', (page) => {
          //console.log('CurrentPage changed to => ', page)
          this.$emit('slidePageChanged');
        })
      },
      _onScrollEnd () {
        this.$emit("onScrollEnd");
        //console.log('CurrentPage => ', this.slide.getCurrentPage())
      },
      nextPage() {
        this.slide.next()
      },
      prePage() {
        this.slide.prev()
      }
    }
  }
</script>

<style scoped lang='scss'>
.slide-banner{
  .banner-wrapper{
    position:relative;
  }
  .slide-banner-wrapper{
    min-height:1px;
    overflow:hidden;
  }
  .slide-banner-content{
    height:200px;
    white-space:nowrap;
    font-size:0;
    .slide-page{
      display:inline-block;
      height:200px;
      width:100%;
      line-height:200px;
      text-align:center;
      font-size:26px;
      a{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-decoration: none;
        img{
          width: 100%;
          height: 100%;
        }
      }

    }
  }
  .dots-wrapper{
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    .dot{
      display:inline-block;
      margin:0 4px;
      width:8px;
      height:8px;
      border-radius:50%;
      background:#eee;
      &.active{
        width:20px;
        border-radius:5px;
      }
    }
  }
  .btn-wrap{
    margin-top:20px;
    display:flex;
    justify-content:center;
    button{
      margin:0 10px;
      padding:10px;
      color:#fff;
      border-radius:4px;
      background-color:#666;
    }
  }
}
</style>

组件使用代码：

<template>
  <div class="slidertest">
    <SliderDefault :nums="slides.length">
      <div v-for="(value, index) in slides" :key="index">
        <a :href="value.url">
          <img :src="value.src" alt="">
        </a>
      </div>
    </SliderDefault>
  </div>
</template>


<script>
  import SliderDefault from './SliderDefault'
  export default {
    name:"SliderTest",
    data() {
      return {
        nums: 4,
        currentPageIndex: 0,
        slides: [
          {
            src: require('../assets/logo.png'),
            url:"#"
          },
          {
            src: require('../assets/20190726150130.png'),
            url:"#"
          },
          {
            src: require('../assets/logo.png'),
            url:"#"
          },
          {
            src: require('../assets/20190726150130.png'),
            url:"#"
          }
        ]
      }
    },
    components:{
      SliderDefault
    }
  }
</script>

<style scoped lang='scss'>
.slidertest{

}
</style>