前言

最近在項目開發(fā)中，遇到一個令人頭疼的問題。當一個容器能左右滑動時，手指在該容器上做上下滑動的手勢頁面不會上下滾動（在容器外圍上下滑動是可以的，所以排除頁面的scroll問題），并且這個問題只會在ios上出現(xiàn)，安卓沒有。

通過查資料發(fā)現(xiàn)，原生的IOS scroll有這個問題，所以就使用了本文所講的better-srcoll來解決。下面來講講如何使用better-scroll來實現(xiàn)左右和上下滾動。

環(huán)境準備

1. 安裝better-scroll

npm install --save better-scroll

2.引入better-scroll

import   BScroll   from   "better-scroll"

實現(xiàn)左右滾動

使用BScroll實例化之前必需要等待DOM渲染完成。
產(chǎn)生左右滾動的條件是子盒子內的寬度必須要大于父盒子的寬度，所以我們在用better-scroll時，必須要先得到滾動區(qū)域的尺寸和父盒子的尺寸，來計算出是否能滾動。
下面是一個小demo

1. html

<template>
  <div ref="content" class="content"> // 父盒子--滾動區(qū)域
    <ul ref="child" class="child"> // 子盒子-內容區(qū)域
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</template>

（1）class為content的div的父盒子，在此區(qū)域內滾動，需要通過ref拿到DOM。
（2）ul元素是子盒子，包含若干個li元素，可以通過li元素的寬度動態(tài)進行計算，也可以通過ref獲取dom

2. css

<style lang="stylus" scoped>
.content{
    touch-action: none
    padding 15px
    ul{
        li{
            width 90px
            height 90px
            display inline-block
            background  #eee
            line-height 90px
            text-align center
        }
    }
}
</style>

給li標簽90px的寬度，確保子盒的寬度大于父盒子的寬度
3.使用better-scroll

import BScroll from 'better-scroll'
export default {
  mounted () {
    this.$nextTick(() => {
      this.leftToRightScroll()
    })
  },
  methods: {
    leftToRightScroll () {
      let liList = document.querySelectorAll('li')
      let width = liList.length * liList[0].offsetWidth // 動態(tài)計算出內容區(qū)域的大小
      this.$refs.child.style.width = width + 'px' // 修改子盒子區(qū)域的寬度
      this.$nextTick(() => {
        // 確保DOM已渲染
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.content, {
            startX: 0, 
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical',
          })
        } else {
          this.scroll.refresh() // dom發(fā)生改變會刷新
        }
      })
    },
  },
}

(1) 首先拿到所有的li元素的寬度，賦值給ul元素
(2) 生成BScroll實例，其中this.$refs.content就是父盒子的DOM，在此區(qū)域內滾動。

4. 效果圖

   
   
   左右滾動

實現(xiàn)上下滾動

1. html

<template>
  <div ref="content" class="content">  // 父盒子--滾動區(qū)域
    <ul ref="child" class="child">  // 子盒子-內容區(qū)域
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</template>

2. css

<style lang="stylus" scoped>
.content{
    margin-top 200px
    height 200px
    overflow hidden
    touch-action: none
    padding 15px
    ul{
        li{
            width 90px
            height 50px
            background  #eee
            line-height 90px
            text-align center
        }
    }
}
</style>

需要給父元素一個固定的高度，并且overflow屬性為hidden

3. 使用better-scroll

mounted () {
    this.$nextTick(() => {
      let contentDom = this.$refs.content
      this.scroll = new BScroll(contentDom, {})
    })
  },

4.效果圖

上下滾動

解決better-scroll連續(xù)兩次觸發(fā)點擊事件

使用better-scroll后可能會出現(xiàn)點擊事件發(fā)生兩次的情況，這時只需要在配置參數(shù)

this.scroll = new BScroll(this.$refs.content, {
            startX: 0, 
            click: true,  // 改為false
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical',
          })

click改為false就可以了。
想要了解更多參數(shù)及其使用方法請前往：better-scroll文檔地址