在vue中封装一个betterscroll组件，并解决ios、Android在微信页面上下拉出现滑动的问题

最近在开发微信公众号网页的时候，发现使用原生滚动的时候，ios在微信网页下，上拉，下拉都会出现一大片的空白，看起来极其的别扭，为了解决这一问题，找了许多参考资料，如下是解决方法。

1.首先在app.vue的mounted中添加如下代码

mounted（）{
   
   document.body.addEventListener(
        'touchmove',
        function (e) {
   
          e.preventDefault()
        },
        {
    passive: false }
      )
}

当你设置完后会发现，ios\Android下页面确实不能上拉下拉了，但是页面也不能滑动了，大部分博客告诉完你这个方法之后都不会告诉你接下来的解决办法，实属坑人啊，以下是我的解决方法。因为上面那个代码会把所有原生的滚动都禁止掉，所以这里我建议用betterscroll代替原生的滚动。

2.安装betterscroll代替原生的scroll，这样页面就可以滑动了

npm install better-scroll

然后我把betterscroll组件封装了一下

<!--
    参数解释在props中
    使用说明：
      <scroll
      class="wrapper"
      :data="data"
    >
      <div class="content">
      </div>
    </scroll>

    要想betterScroll产生滚动效果，你需要设置'.wrapper'的高度,content的内容高度必须要高于warpper的高度才会显示出滚动条
    如果content里面内容的高度是不固定的，那么需要给scroll传值data
-->
<template>
  <div ref="scrollContainer" class="scroll-container">
    <slot />
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
   
  props: {
   
    /**
     *  传1 滚动的时候会派发scroll事件，会截流
     *  传2 滚动的时候实时派发scroll事件，不会截流。
     *  传3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
     */
    probeType: {
   
      type: Number,
      default: 1
    },
    /** 点击列表是否派发click事件 */
    click: {
   
      type: Boolean,
      default: true
    },
    /** 是否开启横向滚动 */
    scrollX: {
   
      type: Boolean,
      default: false
    },
    /** 是否开启纵向滚动 */
    scrollY: {
   
      type: Boolean,