1. 使用vue 及best scroll做輪播圖，其中slider.vue 引用dom.js 的方法， recommend.vue 組件引用slider.vue 組件；slider.vue 下的mounted 內(nèi)的兩個方法未被正常使用,本應(yīng)該實(shí)現(xiàn)為slider下的div增加slider-item的class(如recommend.vue DOM結(jié)構(gòu)的 注釋部分)，并可以有輪播的功能；
2. 在slider.vue 下的mounted 內(nèi)可以alert出內(nèi)容；在mounted 內(nèi)的兩個方法中增加alert 也可以彈出內(nèi)容..
3. 推測可能是因?yàn)閞ecommend.vue 中異步獲取的圖片在展示出來之前，mounted 內(nèi)的方法已經(jīng)被調(diào)用完了，但是不知道要如何在圖片展示后，再次調(diào)用slider.vue 下的dom 方法...

代碼如下：

recommend.vue

<template>
      <div class="slider-wrapper" v-if="recommends.length !== 0">
        <slider>
          <div v-for="item in recommends"  <!--class="slider-item"-->>
            <a :href="item.linkUrl">
              <img :src="item.picUrl" alt="">
            </a>
          </div>
        </slider>
      </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: {
      _getRecommend () {
        getRecommend().then((res) => {
          if (res.code === ERR_OK) {
            console.log(res.data.slider)
            this.recommends = res.data.slider
          }
        })
      }
    },
    components: {
      Slider
    }
  }
</script>

slider.vue

<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <slot>
      </slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { addClass } from 'common/js/dom'
  import BScroll from 'better-scroll'

  export default {
    mounted () {
      this.$nextTick(() => {
        setTimeout(() => {
//          alert(11)
          this._setSlideWidth()
          this._initDots()
          this._initSlider()
        }, 10)
      })
    },
    methods: {
      _setSlideWidth () {
        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) {
          width += 2 * sliderWidth
        }
        this.$refs.sliderGroup.style.width = width + 'px'
      },
      _initSlider () {
        console.log(11)
        this.slider = new BScroll(this.$refs.slider, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          snap: true,
          snapLoop: this.loop,
          snapThreshold: 0.3,
          snapSpeed: 400
        })
      }
    }
  }
</script>

dom.js

export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }

  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}
export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}