vue实现横向滚动效果（better-scroll）

使用better-scroll实现滚动效果，参照大佬的文章，将better-scroll封装成组件可供多次调用。

1. 封装slider组件

如何封装slider组件参考文档中解释的非常详细，但有一些细节可以提出。

• 由于为横向滚动，首先需要一个宽度不变的wrapper，然后再制作一个较宽的content，content的宽度来源于调用该组件的页面提供的子元素，一般以列表提供，在组件中使用slot插槽方便插入列表。因此需要一个三层结构的div页面。

  <div class="slider" ref="slider">//最外层wrapper
    <div class="slider-group" ref="sliderGroup">//content层
      <slot>
      </slot>
    </div>
  </div>

• 初始化时要注意先将sliderGroup的宽度设置好，再进行slider的初始化设置。那如何确定sliderGroup的宽度呢？首先，使用
  this.$refs.sliderGroup.children
  可以获取传入的列表项，列表项横向滑动展示，每个列表项展示的宽度为wrapper的宽度：
  let sliderWidth = this.$refs.slider.clientWidth
  为了方便给列表自定义样式，给每个列表项加上slider-item属性（addClass()是自定义的函数，用于给元素添加属性），而content的宽度即为所有列表项宽度相加。并且如果设置需要循环滚动，需要给sliderGroup添加两个列表项的宽度，better-scroll组件会根据这个多余的宽度实现循环滚动。

_setSliderWidth() {
      this.children = this.$refs.sliderGroup.children
      //width: the width of sliderGroup(content)
      //sliderWidth: the width of slider(wrapper)
      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'
    }

• 初始化slider this.slider = new BScroll(this.$refs.slider, {…}) 以上就抽象出来一个slider组件啦!

2.调用slider组件

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