由于 better-scroll 的滚动原理为：在滚动方向上，第一个子元素的长度超过了容器的长度。

    那么对于 Scroll 组件，其实就是内容元素.cube-scroll-content在滚动方向上的长度必须大于容器元素 .cube-scroll-wrapper。根据滚动方向的不同，有以下两种情况：

    1）纵向滚动：内容元素的高度必须大于容器元素。由于容器元素的高度默认会被子元素的高度撑开，所以为了满足我们的滚动前提，你需要给 Scroll 组件的 .cube-scroll-wrapper元素一个非弹性高度。

    2）横向滚动：内容元素的宽度必须大于容器元素。由于在默认情况下，子元素的宽度不会超过容器元素，所以需要给 Scroll 组件的 .cube-scroll-content 元素设置大于 .cube-scroll-wrapper 的宽度。

    • 基本使用

    通过设置 data 属性为一个数组，即可生成能够在容器内优雅滚动的列表。

    1. .cube-scroll-wrapper
    2.   height: 100px
    • 配置 better-scroll 选项

    1）滚动条

    默认无滚动条，还可设为淡入淡出滚动条或一直显示滚动条。

    1. <cube-scroll :data="items" :options="options"></cube-scroll>

    2）下拉刷新

    默认无下拉刷新功能，可通过配置项pullDownRefresh开启pulling-down事件派发和下拉动画，你可以监听pulling-down事件更新数据。

    1. <cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown">
    2. </cube-scroll>
    1. export default {
    2.   data() {
    3.     return {
    4.       items: [1, 2, 3, 4, 5],
    5.       options: {
    6.         pullDownRefresh: {
    7.           threshold: 90,
    8.           stop: 40,
    9.           txt: 'Refresh success'
    10.         }
    11.       }
    12.     }
    13.   },
    14.   methods: {
    15.     onPullingDown() {
    16.       // Mock async load.
    17.       setTimeout(() => {
    18.         if (Math.random() > 0.5) {
    19.           // If have new data, just update the data property.
    20.           this.items.unshift('I am new data: ' + +new Date())
    21.           // If no new data, you need use the method forceUpdate to tell us the load is done.
    22.           this.- refs.scroll.forceUpdate()
    23.         }
    24.       }, 1000)
    25.     }
    26.   }
    27. }

    需要注意的是，如果请求结果是没有新数据，也就是数据与之前一模一样没有变化，则必须使用 this.- refs.scroll.forceUpdate() 结束此次下拉刷新，这样，Scroll 组件才会开始监听下一次下拉刷新操作。

    默认无上拉加载功能，可通过配置项pullUpLoad开启pulling-up事件派发和上拉动画，你可以监听pulling-up事件更新数据。

    1. export default {
    2.   data() {
    3.     return {
    4.       items: [1, 2, 3, 4, 5],
    5.       itemIndex: 5,
    6.       options: {
    7.         pullUpLoad: {
    8.           threshold: 0,
    9.           txt: {
    10.             more: 'Load more',
    11.             noMore: 'No more data'
    12.           }
    13.         }
    14.       }
    15.     }
    16.   },
    17.   methods: {
    18.     onPullingUp() {
    19.       // Mock async load.
    20.       setTimeout(() => {
    21.         if (Math.random() > 0.5) {
    22.           // If have new data, just update the data property.
    23.           let newPage = [
    24.             'I am line ' + ++this.itemIndex,
    25.             'I am line ' + ++this.itemIndex,
    26.             'I am line ' + ++this.itemIndex,
    27.             'I am line ' + ++this.itemIndex
    28.           ]
    29.  
    30.           this.items = this.items.concat(newPage)
    31.         } else {
    32.           // If no new data, you need use the method forceUpdate to tell us the load is done.
    33.           this.- refs.scroll.forceUpdate()
    34.         }
    35.       }, 1000)
    36.     }
    37.   }
    38. }

    需要注意的是，如果请求结果是没有新数据，也就是数据与之前一模一样没有变化，则必须使用 this.- refs.scroll.forceUpdate() 结束此次上拉加载，这样，Scroll 组件才会开始监听下一次上拉加载操作。

    • 自定义下拉刷新和上拉加载动画

    如果你不喜欢内置的下载刷新插槽和上拉加载，还可以用做自定义动画。下面这个示例，就是用作用域插槽对下拉刷新做了自定义动画，而上拉加载则保留了缺省的内置动画。

    1. <cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
    2.   <template slot="pulldown" slot-scope="props">
    3.     <div v-if="props.pullDownRefresh" class="cube-pulldown-wrapper" :style="props.pullDownStyle">
    4.       <div v-if="props.beforePullDown" class="before-trigger" :style="{paddingTop: props.bubbleY + &#39;px&#39;}">
    5.         <span :class="{rotate: props.bubbleY &gt; 40}">↓</span>
    7.       <div class="after-trigger" v-else="">
    8.         <div v-if="props.isPullingDown" class="loading">
    9.           <cube-loading></cube-loading>
    10.         </div>
    11.         <div v-else=""><span>Refresh success</span></div>
    12.       </div>
    13.     </div>
    14.   </template>
    15. </cube-scroll>

    通过作用域插槽提供的作用域参数，你可以根据各个状态的变化来控制动画流程。具体的作用域参数及其含义详见下面的插槽。

    中 better-scroll 的几个常用配置项，scrollbar、pullDownRefresh、pullUpLoad这三个配置即可设为 Boolean（false 关闭该功能，true 开启该功能，并使用默认子配置），也可设为Object，开启该功能并具体定制其子配置项。

    • scrollbar 子配置项
    • pullDownRefresh 子配置项
      |参数|说明|类型|可选值|默认值
      |——-
      |threshold|下拉刷新动作的下拉距离阈值|Number|-|90
      |stop|回弹停留的位置|Number|-|组件会自动计算回弹时显示的元素高度作为默认值
      |stopTime|刷新成功的文案显示时间|Number|-|600
      |txt|刷新成功的文案|String|-|'Refresh success'
    • pullUpLoad 子配置项