vue  实现better-scroll横向滚动

       首先需要引入better-scrollc 插件（better-scroll插件作用主要是解决移动端的滚动环境（已支持PC））。

npm install better-scroll --save

//组件文件中引入better-scroll

import BScroll from 'better-scroll'
 

       使用better-scrol

     首先的说一下滚动的方式，首先有两个容器，一个为父容器（绿色部分）且具有固定高度，宽度可选，一个子容器（黄色部分）1且高度会随内容的增多而变大（滚动的内容），宽度可选，当子容器的高度大于父容器时，就会滚动，反之不会滚动。

   横向滚动的方式同理可得！

    下面是横向滚动的示例代码：

 <div class="father_srcoll" ref="father_srcoll">
       <div class="child_scroll" ref="child_scroll">
         <div v-for="item,index in 20" style="width:50px;height:50px;">
            This is iotem{{item}}
         </div>
       </div>
     </div>


<script>
import BScroll from 'better-scroll';
export default {
    data: function () {
      return {
       width:0
      
      }
    },
 created(){
      this.$nextTick(() => {//回调横向滚动方法
         this.personScroll();
    });
    },
  GetNum() {
        this.width=120*3;
        return this.width;
      },//计算出横向滚动组件需要的总宽度

      personScroll() {
        this.$refs.child_scroll.style.width = this.GetNum() + "px";
        this.$nextTick(() => {
          if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.father_srcoll, {
            startX: 0,
            click: true,
            scrollX: true,//
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
      },//横向滚动
</script>
<style>
.father_scroll
{
  position: absolute;
    height: 180px;
    margin-top: 35px;
    width: 100%;
    overflow: auto;
    z-index:5;
}
.child_scroll{
   width: 100%;
    position: absolute;
    display: flex;
}
</style>