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>

結束，若是有錯的地方歡迎指正~~