better-scroll的纵向滚动和横向滚动：

better-scroll的纵向滚动和横向滚动：

前言：

最近学习了vue,在本身作一个小项目练习，期间要使用到better-scroll来实现流畅的滚动效果，一开始只知道它能实现纵向滚动（是我孤陋寡闻了/(ㄒoㄒ)/~~），后来还要实现横向滚动的功能，搜索了一下，发现横向滚动和纵向滚动仍是有点区别的，因此在这里概括总结一下，但愿能帮到有这个需求的人噜。

(无图警告: 由于还没搞懂怎么添加图片这篇文章没有演示图）

1.安装better-scrollb

我是使用npm安装的：

npm install better-scroll --save

也能够用其余安装方法，这里就不说了。

2.将滚动功能抽取为一个组件：

实现滚动这个功能确定不少组件都会用到，既然如此咱们就其专门封装为一个组件，我这里称滚动组件为 scroll，在要实现滚动的组件内套用该组件便可。

并且这样只有这两个组件对better-scroll有依赖，其余要实现滚动的组件没有，方便后期对项目进行维护。

（如下全部组件在和 app.vue 在同一目录下）

scroll滚动组件封装：

纵向滚动：

只有content(滚动区域）的高度大于包裹它的wrapper的高度时，才会滚动，具体原理能够查看：https://zhuanlan.zhihu.com/p/...

只要给wrapper一个高度，当滚动内容的高度大于wrapper高度时就会发生滚动。

横向滚动：

可是在横向滚动时，html中块级元素的宽度度默认是其父元素的100%，因此content的默认宽度就是wrapper的宽度，滚动区域宽度等于包裹体的宽度，就不会发生横向滚动了，解决方案是将content的宽度设为其子元素的宽度。

将块级元素的宽度设置为其子元素宽度的方法有几种，能够参考：https://www.jianshu.com/p/f31...

这里我是使用的将display设置为inline-flex:

.content{
    display: inline-flex;
    overflow: hidden;
  }

设置后该元素内的子元素都会横向排列，根据本身的需求，在使用scroll组件的模板内决定是否要添加该类,纵向滚动不须要为div设置该类

下面是该组件的具体代码，关键的参数就是把scrollX设置为true, 让X轴滚动启用，更多参数能够查看官方文档或者搜索一下。用到的参数做用见代码注释

scroll.vue

<template>
 <div class="wrapper" ref="wrapper">
     <!-- 默认插槽，使用该组件时用要滚动内容替换 -->
     <slot></slot>
 </div>
 
</template>

<script>
 //导入BScroll
 import BScroll from "better-scroll"
export default {
 name:"scroll",
 data() {
   return {
     scroll:null
   }
 },
 mounted() {
   //建立BScroll对象并设置参数
   this.scroll = new BScroll(this.$refs.wrapper,{
     mouseWheel: true,//开启鼠标滚轮
     disableMouse: false,//启用鼠标拖动
     disableTouch: false,//启用手指触摸
     scrollX: true,  //X轴滚动启用  
     // eventPassthrough: 'vertical',设置该属性为vertical 则只会滚动设置为true的轴
   })
 },
}
</script>

<style scoped>

</style>

3.纵向及横向滚动实现：

使用scroll组件实现纵向和横向滚动：

在scrollTest组件中要求实现滚动功能：

只用在须要要滚动的区域外，套上刚才封装的组件scroll便可。

这里为了测试我直接给定了wrapper的高度300px，宽度300px，实际使用时你能够经过计算来决定或者本身指定一个高度。

注意设置wrapper的 overflow: hidden;，不设置也不影响纵向滚动，可是会让横向滚动出现原生滚动条，而使整个页面滚动（当滚动区宽度太大时）

scrollTest.vue代码以下：

<template>
  <div class="Test">
    <!-- 使用滚动组件 -->
     <scroll class="wrapper">
       <!-- 下面的内容替换了默认插槽 -->
       <div class="content">
          <div class="scrollTest">我是要纵向和横向都滚动的内容</div>
          <div class="scrollTest scrollTest2">我也是要纵向和横向都滚动的内容</div>
       </div>
       
     </scroll>
  </div>
</template>

<script>
  //导入刚才封装的滚动组件
  import scroll from './scroll'
export default {
  name:"scrollTest",
  components:{
    scroll        //注册组件
  }
}
</script>

<style scoped >
  .wrapper{
    background-color: green;
    height: 300px;
    width:300px;
    overflow: hidden;
  }
  /* 设置后该元素内的子元素都会横向排列，根据本身的需求来决定是否要设置
  *  纵向滚动不须要设置该类。
  */
  .content{
    display: inline-flex;
    overflow: hidden;
    }
  /* 设置滚动内容的宽和高都大于wrapper */
  .scrollTest,.scrollTest2{
     background-color:red;
     width: 900px;
     height: 600px;
     font-size: 30px;
     font-weight: bold;
  }
  .scrollTest2{
     background-color:yellowgreen;
  }

</style>

能够在app.vue里使用 scrollTest 组件测试效果

app.vue：

<template>
  <div id="app">
    <scrollTest></scrollTest>
  </div>
</template>

<script> 
  import scrollTest from './scrollTest'
export default {
  name:'app',
  components:{  
    scrollTest
  }
}
</script>
<style lang="less">
  // @import "assets/css/base.css";
</style>

结束，若是有错的地方欢迎指正~~