<scroller>

<scroller>

简介

<scroller> 是一个容纳子组件进行横向或竖向滚动的容器组件。如果你的组件需要进行滚动，可以将 <scroller> 当作根元素或者父元素使用，否则页面无法滚动（ <list> 组件除外， <list> 默认可以滚动）。

WARNING

不允许相同方向的 <list> 或者 <scroller> 互相嵌套，换句话说就是嵌套的 <list> / <scroller> 必须是不同的方向。
<scroller> 需要显式的设置其宽高，可使用 position: absolute; 定位或 width、height 设置其宽高值。

<template>
  <scroller class="scroller">
    <div class="row" v-for="row in rows" :key="row.id">
      <text class="text">{{row.name}}</text>
    </div>
  </scroller>
</template>
<script>
  const dom = weex.requireModule('dom')
  export default {
    data () {
      return {
        rows: []
      }
    },
    created () {
      for (let i = 0; i < 80; i++) {
        this.rows.push({id: i, name: 'row ' + i})
      }
    },
  }
</script>

子组件

<scroller> 支持任意类型的 Weex 组件作为其子组件。其中，还支持以下两个特殊组件作为子组件：

<refresh>: 用于添加下拉刷新的功能。详情请查看<refersh>。
<loading>: 用于添加上拉加载更多的功能。详情请查看<loading>。

属性

参数	说明	类型	默认值
show-scrollbar	控制是否出现滚动条	boolean	true
scroll-direction	控制滚动的方向	string（horizontal 或者 vertical）	vertical
loadmoreoffset	触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与页面底部之间的距离）。当页面的滚动条滚动到足够接近页面底部时将会触发 `loadmore` 这个事件	number	0
offset-accuracy	控制 `scroll` 事件触发的频率，默认值为 10，表示两次 `scroll` 事件之间列表至少滚动了 10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能	number	10
scrollToBegin	控制 `scroll` 内容（layout）改变后，是否自动滚到初时位置。默认是true	string	true

WARNING

scroll-direction 定义了 scroller 的滚动方向，样式表属性 flex-direction 定义了 scroller 的布局方向，两个方向必须一致。例如：

scroll-direction 的默认值是 vertical，flex-direction 的默认值是 column；
当需要一个水平方向的 scroller 时，使用 scroll-direction="horizontal" 和 flex-direction: row;
当需要一个竖直方向的 scroller 时，使用 scroll-direction="vertical" 和 flex-direction: column，由于这两个值均是默认值，当需要一个竖直方向的 scroller 时，这两个值可以不设置。

loadmoreoffset 如图所示: