【重点突破】—— 当better-scroll 遇见Vue

前言：在学习黄轶老师的《Vue.js高仿饿了么外卖App》课程中接触到了better-scroll第三方JavaScript组件库，这是黄轶老师自己基于iscroll重写的库。这里结合黄轶老师的知乎文章和Vue2.0项目对better-scroll的具体应用，只作为学习，对其中的原理和应用步骤做一个梳理。

---

            移动端项目列表滚动的需求

     竖直滚动：

      横向滚动：

 

           什么是better-scroll

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

• 安装better-scroll

npm install better-scroll --save

　　

           better-scroll 的滚动原理

      浏览器的滚动原理：

浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

      better-scroll的滚动原理：

 

• 常用的html结构

div class="wrapper">
 <ul class="content"> 
      <li></li>
      <li></li> 
      <li></li>
      <li></li> 
  </ul>
</div>

 当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理

• 初始化better-scroll　　

 import BScroll from 'better-scroll'
 let wrapper = document.querySelector('.wrapper')
 let scroll = new BScroll(wrapper, {})

关于参数：better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。

               第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数，具体参考 better-scroll 的文档。　　

      better-scroll 的初始化时机：

• 初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。
• 如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。
• 所以常见的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。

在《Vuejs高仿饿了么外卖App》课程中是这样处理的：

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    mounted() {
      this.$nextTick(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {})
      })
    }
  }
</script>

• Vue2.0中提供了一个获取 DOM 对象的接口—— vm.$refs，可以通过了 this.$refs.wrapper访问到了这个 DOM 对象　
•  this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来； 如果不在下面的this.$nextTick()方法里回调这个方法，数据改变后再来计算滚动轴就会出错

 实现效果：

  

            better-scroll不能滚动的原因

      需要DOM加载完成后才能正确应用. vue中应用在$nextTick中，异步初始化

      子元素高度需要超过父元素。而且父元素需要设置高度（这才是better-scroll能够滚动的原理）

      better-scroll在使用的时候，滚动只作用于第一个子元素，其它的元素都会被忽略。在vue中，获取的ref是ratings，它的子元素包含rating-content和rating-wrapper等多个同级元素，那么需要在这些同级元素外层，ratings内层再套一个<div>，这个<div>才是需要滚动的部分

 

<div class="ratings" ref="ratings">
    <div> //这才是滚动的范围
        <div class="rating-content"></div>
        <div class="rating-wrapper"></div>
        <v-split></v-split>
    </div>
</div>

      隐藏切换显示都会导致插件参数的scrollerHeight:0。此时需要加上click:true，使better-scroll支持点击事件，再调用下refresh(）重新渲染DOM就行了

this.$nextTick(() => {
       if(!this.scroll){
             this.scroll = new BScroll(this.$refs.food, {
                        click: true
             })
       }else{
        this.scroll.refresh();
       }
})