解决 better-scroll插件使用过程中无法滑动bug（原创，禁止转载）

解决 better-scroll插件使用过程中无法滑动bug

1：首先我们要知道 better-scroll 实现的原理

条件

必须包含两个大的div，外层和内层div
外层div设置可视的大小(宽或者高)-有限制宽或高
内层div，包裹整个可以滚动的部分
内层div(content)高度一定大于外层div(wrapper)的宽或高，才能滚动

翻译：Warpper（包装，包装器) content(内容)
顾名思义，Wrapper 就是外层的盒子，content 就是你需要滑动区域里的内容
也就是，你想要使用better-scroll 你必须要满足上面的几个条件

2：如何下载并引用better-scroll?

–save 和 --dev的区别
–save 会将模块依赖写入dependencies 节点
–save-dev 会将模块依赖写入devDependencies 节点。
//这两个节点都在 package.json中，它可以看见你的项目的相关依赖

## 博主目前是通过node，搭建项目 npm install better-scroll --save

下载完成后，在需要使用的组件中 通过 import BScroll from ‘better-scroll’ 导入

3：了解了如何下载以后，接下来就说为什么会出现滑块无法滑动的原因？

3.1： 在这里我们假设 content容器中 我们内容占用的高度是200px(里面包含了，文字，图片，GIF等动画),这个时候如果你将内容全部放进去的时候 better-scroll 底层会对 content容器做一个高度计算。这时候，better-scroll 后台知道接收到计算数值，你要滑动的区域是 200px，这时你所能滑动的区域只能是200px，而有人会问，是啊，就是这样啊，没问题啊，为什么我的划到一定区域无法滑动了呢 ？

3.2：这是因为当你的组件scroll或标签 被挂载时候better-scroll已经对你的高度进行了一个计算，假如，这时你的content内容是异步请求渲染出来的，此时可能还有数据未加载完成，但是better’-scroll已经将i你的高度计算出来了，这时你再向下滑动时只能滑动到better-scroll第一次计算的像素高度，（异步请求的数据）而这时的高度是不正确的，所以，明白了为什么之后我想，解决这个问题应该就很简单了。

4：如何解决？

**就是在我们数据加载完成的时候，我们需要对content 内容高度进行一个刷新，也就是 refresh（）函数

所以在我们数据请求且加载完成之后，实时监听，一旦加载完成，我们对better-scroll 进行一个高度刷新 调用refresh（）函数即可，这样就可以完美解决无法下拉滑动的问题啦。

props: {
    ProbeType: {
      type: Number,
      default: 0
    },
    PullUpload: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scroll: null,
    };
  },

 const options = {
      click: true,  //--设置better-scroll 区域可点击
      probeType: this.ProbeType,  
      pullUpLoad: this.PullUpload
    }
    //创建better-scroll 通过上方data里scroll接收new 出来的Scroll 
    this.scroll = new BScroll(this.$refs.wrapper, options)


    //当ProbeType 值等于 2或者等于 3 时 才进行监听  2  监听 滑动的区域 （不包括惯性下拉区域 ） 3 : 监听滑动区域（包括 惯性下拉的区域 ）
    if (this.ProbeType === 2 || this.ProbeType === 3) {
      //监听滚动的位置
      this.scroll.on('scroll', (position) => {
        this.$emit('BackTopParams', position)
      })
    }

    //监听滑动到底部区域的事件 
    if (this.PullUpload) {
      //监听上拉事件
      this.scroll.on('pullingUp', () => {
        this.$emit('PullLoading')
      })
    }

methods: {
    //封装 Scroll 方法 返回顶部
    ScrollTo (x, y, time) {
      this.scroll && this.scroll.scrollTo(x, y, time)
    },
    //封装finishpillUp 完成上拉加载更多 
    finishPullUp () {
      this.scroll && this.scroll.finishPullUp()
    },
    //**看主要的refresh方法 我们在这封装一个方法 其他组件使用时，直接调用refresh()方法即可**
    refresh () {
      this.scroll && this.scroll.refresh()
    }

  },
  

这里是使用better-scroll 组件中的代码  
<scroll class="content"
 //注意看 ref = ScrollDate  这里也就对应着 下方的方法调用。
            ref="ScrollDate"
            :probe-type="3"
            @BackTopParams='conntentScroll'
            :PullUpload="IsAppearObj.isPullUP"
            @PullLoading='LoadMore'>
      <home-swiper :banners='banners'
                   @SwiperimgLoad="ControlTop"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view></feature-view>
      <tab-control :titles="['流行','新款','精选']"
                   class="tab-control"
                   @tabclick="UpdateTbabardata"
                   ref="tabcontrolRoutine"></tab-control>
      <goods-list :goods="ShowGoods"></goods-list>
    </scroll>
   //  获取组件对象 ，调用上方 refresh() 方法
    this.$refs.ScrollDate.refresh()