3.vue2.0 轮番图组件实现

1.轮播组件实现（上）
(1)Recommend.vue

<template>  <div class="recommend" >    <div class="recommend-content">        <div class="slider-wrapper">          <slider>            <div v-for="item in recommends">              <a :href="item.linkUrl">                <img :src="item.picUrl">              </a>            </div>          </slider>        </div>        <div class="recommend-list">          <h1 class="list-title">热门歌单推荐</h1>          <ul>          </ul>        </div>    </div>  </div></template>

<script type="text/ecmascript-6">  import Slider from 'base/slider/slider'  import {getRecommend} from 'api/recommend'  import {ERR_OK} from 'api/config'  export default {    data() {      return {        recommends: []      }    },    created() {      this._getRecommend()    },    methods: {      //1.获得轮番图接口数据      _getRecommend() {        getRecommend().then((res) => {          if (res.code === ERR_OK) {            this.recommends = res.data.slider          }        })      }    },    components: {      Slider    }  }</script>

(2)Slider.vue

<template>  <div class="slider" >    <div class="slider-group">      <slot>      </slot>    </div>    <div class="dots">    </div>  </div></template><script type="text/ecmascript-6">  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() {    },    methods: {    }  }</script>

2.轮播图组件实现（中）

<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>

技术点：
（1）:class=”{active: currentPageIndex === index }”
（2）ref=”slider”

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()      })    },    destroyed() {      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() {        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)      }    }  }</script>