Skip to content

Latest commit

 

History

History
71 lines (43 loc) · 2.86 KB

File metadata and controls

71 lines (43 loc) · 2.86 KB

<scroller>

<scroller>是一个竖直的,可以容纳多个排成一列的子组件的滚动器。如果子组件的总高度高于其本身,那么所有的子组件都可滚动。

注意: <scroller> 可以当作根元素或者嵌套元素使用。此组件的滚动方向是垂直方向的形式。

子组件

支持任意类型的 Weex 组件作为其子组件。 其中,还支持以下两个特殊组件作为子组件:

  • <refresh>

    用于给列表添加下拉刷新的功能。

    使用文档请查看 <refresh>

  • <loading>

    <loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。

    使用文档请查看 <loading>

特性

  • show-scrollbar {boolean}:可选值为 true/ false,默认值为 true。控制是否出现滚动条。
  • scroll-direction {string}:可选为 horizontal 或者 vertical,默认值为 vertical 。定义滚动的方向。
  • loadmoreoffset {number}:默认值为 0,触发 loadmore 事件所需要的垂直偏移距离(设备屏幕底部与页面底部之间的距离)。当页面的滚动条滚动到足够接近页面底部时将会触发 loadmore 这个事件。
  • loadmoreretry {number}:默认值为 0,当 loadmore 失败时是否重置 loadmore 相关的 UI,值不一样就会重置。

样式

通用样式:支持所有通用样式

事件

  • loadmore v0.5+:如果滚动到底部将会立即触发这个事件,你可以在这个事件的处理函数中加载下一页的列表项。

  • 通用事件

    支持所有通用事件:

  • click

  • longpress

  • appear

  • disappear

    查看 通用事件

扩展

scrollToElement(node, options)

滚动到列表某个指定项是常见需求, 拓展了该功能支持滚动到指定 。通过 dom module 访问,更多信息可参考 dom module 。

参数

  • node {node}:指定目标节点。
  • options {Object}:
    • offset {number}:一个到其可见位置的偏移距离,默认是0

约束

不允许相同方向的 <list> 或者 <scroller> 互相嵌套,换句话说就是嵌套的 <list>/<scroller> 必须是不同的方向。

举个例子,不允许一个垂直方向的 <list> 嵌套的一个垂直方向的 <scroller> 中,但是一个垂直方向的 <list> 是可以嵌套的一个水平方向的 <list> 或者 <scroller> 中的。