使用better-scroll解决ios滚动问题

前言

最近在项目开发中，遇到一个令人头疼的问题。当一个容器能左右滑动时，手指在该容器上做上下滑动的手势页面不会上下滚动（在容器外围上下滑动是可以的，所以排除页面的scroll问题），并且这个问题只会在ios上出现，安卓没有。

通过查资料发现，原生的IOS scroll有这个问题，所以就使用了本文所讲的better-srcoll来解决。下面来讲讲如何使用better-scroll来实现左右和上下滚动。

环境准备

1. 安装better-scroll

npm install --save better-scroll

2.引入better-scroll

import   BScroll   from   "better-scroll"

实现左右滚动

使用BScroll实例化之前必需要等待DOM渲染完成。
产生左右滚动的条件是子盒子内的宽度必须要大于父盒子的宽度，所以我们在用better-scroll时，必须要先得到滚动区域的尺寸和父盒子的尺寸，来计算出是否能滚动。
下面是一个小demo

1. html

<template>
  <div ref="content" class="content"> // 父盒子--滚动区域
    <ul ref="child" class="child"> // 子盒子-内容区域
      <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的父盒子，在此区域内滚动，需要通过ref拿到DOM。
（2）ul元素是子盒子，包含若干个li元素，可以通过li元素的宽度动态进行计算，也可以通过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 // 动态计算出内容区域的大小
      this.$refs.child.style.width = width + 'px' // 修改子盒子区域的宽度
      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发生改变会刷新
        }
      })
    },
  },
}

(1) 首先拿到所有的li元素的宽度，赋值给ul元素
(2) 生成BScroll实例，其中this.$refs.content就是父盒子的DOM，在此区域内滚动。

4. 效果图

   
   左右滚动

实现上下滚动

1. html

<template>
  <div ref="content" class="content">  // 父盒子--滚动区域
    <ul ref="child" class="child">  // 子盒子-内容区域
      <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连续两次触发点击事件

使用better-scroll后可能会出现点击事件发生两次的情况，这时只需要在配置参数

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

click改为false就可以了。
想要了解更多参数及其使用方法请前往：better-scroll文档地址