vue轮播图组件

采用better-scroll组件，是一个适用于易懂端的滚动插件。具体插件使用详情请查看https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html#npm

<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"></span>
  </div>
</div>
</template>

<script>
import {addClass} from '@/assets/js/dom.js';
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();
    })
  },
  methods:{
      _setSliderWidth(isResize){
        this.children=this.$refs.sliderGroup.children;
        let width=0;
        let sliderWidth=this.$refs.slider.clientWidth;
        console.log(sliderWidth)
        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(){
        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){
            clearTimeout(this.timer)
            this._play();
          }

        })
      },
      _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)
      }
  },
  destroyed(){
    clearTimeout(this.timer)
  }
}
</script>


<style lang="scss">
  @import '../../assets/sass/_variable.scss';
  .slider{
    overflow:hidden;
    position:relative;
    .slider-group{
      overflow:hidden;
      white-space:nowrap;
      .slider-item{
        float:left;
        box-sizing:border-box;
        overflow:hidden;
        a{
          display:block;
          width:100%;
          overflow:hidden;
          text-decoration:none;
          img{
          display:block;
          width:100%;
          }
        }
        
      }

    }
    .dots{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      text-align:center;
      display:inline-block;
      .dot{
          display:inline-block;
          width:0.8rem;
          height:0.8rem;
          border-radius:50%;
          margin:0 0.4rem;
          background-color:#fff;
          &.active{
            width:2rem;
            border-radius:0.5rem;
            background-color:$color-theme;
          }
      }

    }
  }  
</style>

问题一：
取不到数据，是由于在使用slider父组件recommend.vue中，加载slot组件的时候还没取到数据，所以加载的是空数据，所以要在父组件中写一个v-if

<slider v-if="recommend.length">
      <div v-for="item in recommend">
        <a :href="item.linkUrl">
          <img :src="item.picUrl" alt="">
        </a>
      </div>
 </slider>