Scroll

滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。

滚动原理

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

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

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

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

示例

• 基本使用

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

<cube-scroll :data="items"></cube-scroll>

.cube-scroll-wrapper
  height: 100px

• 配置 better-scroll 选项

通过 options 属性可以配置 better-scroll 的选项，包括滚动条、下拉刷新、上拉加载等，具体可查看 better-scroll 的官方文档，这里仅对几个常用的配置项进行介绍说明。

1）滚动条

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

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

export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      options: {
        scrollbar: {
          fade: false
        }
      }
    }
  }
}

2）下拉刷新

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

<cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown">
</cube-scroll>

export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      options: {
        pullDownRefresh: {
          threshold: 90,
          stop: 40,
          txt: 'Refresh success'
        }
      }
    }
  },
  methods: {
    onPullingDown() {
      // Mock async load.
      setTimeout(() => {
        if (Math.random() > 0.5) {
          // If have new data, just update the data property.
          this.items.unshift('I am new data: ' + +new Date())
        } else {
          // If no new data, you need use the method forceUpdate to tell us the load is done.
          this.- refs.scroll.forceUpdate()
        }
      }, 1000)
    }
  }
}

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

3）上拉加载

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

<cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp"></cube-scroll>

export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      itemIndex: 5,
      options: {
        pullUpLoad: {
          threshold: 0,
          txt: {
            more: 'Load more',
            noMore: 'No more data'
          }
        }
      }
    }
  },
  methods: {
    onPullingUp() {
      // Mock async load.
      setTimeout(() => {
        if (Math.random() > 0.5) {
          // If have new data, just update the data property.
          let newPage = [
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex
          ]
 
          this.items = this.items.concat(newPage)
        } else {
          // If no new data, you need use the method forceUpdate to tell us the load is done.
          this.- refs.scroll.forceUpdate()
        }
      }, 1000)
    }
  }
}

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

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

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

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

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

Props 配置

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

• scrollbar 子配置项

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

• pullUpLoad 子配置项

插槽

事件

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/scroll