<scroller> 组件

[ding102992]

本文档已迁移至 https://weex-project.io/cn/references/components/scroller.html ，此处不再维护，谢谢。

概述

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

注意: 可以当作根元素或者嵌套元素使用。此组件的滚动方向是列的形式(原文： The scroll direction of this component is column)，不可更改。

子组件

这类组件支持任意类型的weex组件作为其自组件。

属性

• show-scrollbar: true | false. 这个属性决定滚动条是否现实，默认是true
• scroll-direction: 定义子组件的滚动方向, horizontal 或者 vertical。
  其他属性请查看 公共属性.

样式

共公样式: 查阅 公共样式

• 支持flexbox相关样式
• 支持box model相关样式
• 支持position相关样式
• 支持opacity, background-color等.

事件

公共事件: 查阅 公共事件

• 支持 click 事件。 查阅 公共事件
• 支持 appear / disappear 事件。 查阅 公共事件

示例

<template>
  <scroller>
    <div repeat="{{list}}">
      <text>{{name}}: ${{price}}</text>
    </div>
  </scroller>
</template>

<script>
  module.exports = {
    data: {
      list: [
        {name: '...', price: 100},
        {name: '...', price: 500},
        {name: '...', price: 1.5},
        ...
      ]
    }
  }
</script>

[lvscar]

THX! . 文档站已经添加译文链接. 中文文档索引 也已经更新

[vczero]

@ding102992
scroll-direction这块需要更新下，和官网一致

[ding102992]

已更新。

[natman44]

怎么是scroll变成横向滑动？

[vczero]

@ding102992 scrollDirection应该是小写加横线吧，即scroll-direction。

[ding102992]

@vczero 谢谢，已更新

[guogailee]

英文原版文档，一开始说明了scroller的方向是垂直的，不能改变，在介绍属性的时候又有scroll-direction：[horizontal|vertical]两种选择，测试了一下scroll-direction:horizontal貌似不支持。 @lvscar

[guogailee]

在scroller和list都有提到refresh和loading，链接进去应该还没有文档吧 @lvscar

[jiangfei891111]

对啊文档里这句话什么意思 Notes: A can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed.

[StanNing]

这个例子运行在真机上，为什么这个控件的高度总是超过一屏多一点点，导致拉到最下面，最后后几行数据会被屏幕挡住，无法显示？

[vczero]

@StanNing 如果是bug或者跟文章无关的问题都可以提到weex主仓库的issues下去，thx

[coderyi]

scroller不一定的竖直的，文档开头就这样说？？

[gokoo]

我把示例代码copy进we文件里，weex运行没有显示，该怎么做

[ding102992]

@280772270 省略号,你去掉了么.

[gokoo]

现在弄懂了，谢谢啦

[Jam1zhu]

求教啊。加载的官方实例 https://github.com/alibaba/weex/tree/dev/examples
在ios端没问题，可是为什么在android端不能滚动？

[Jam1zhu]

@ding102992

[Nstd]

有个bug：

<scroller scroll-direction="horizontal">
  <div id="innerContainer" style="flex-direction: row;">
    <div repeat={{list}}>...</div>
  </div>
</scroller>

scroller设置为scroll-direction="horizontal"，内容超出显示范围时，如果不设置innerContainer的宽度，不能滚动（用weex的悬浮工具栏以3D方式显示层级结构，发现是innerContainer的宽度为屏幕宽度导致的，weex有做特殊处理？？）

[ding102992]

麻烦 @lvscar @vczero 回复一下以上两位的问题。

[Jam1zhu]

@Nstd 横屏滚动，能实现吗？

[Nstd]

@Jam1zhu 设置<scroller scroll-direction="horizontal"> ，然后手动计算一下.innerContainer的宽度（貌似是bug），是可以实现横屏滚动的

[hyqinloveslife]

为什么wxc-tabbar里面的参数，src="xxx.js"，没办法去显示内容，而且，我的xxx.js文件是在服务器上的，能打开。

[RrtoyewxXu]

@Nstd 手动计算innerContainer的宽度得小于scroller宽度才能横屏滚动吗？

[yundongbot]

@guogailee
文档已经更新啦。

• http://alibaba.github.io/weex/cn/doc/components/refresh.html
• http://alibaba.github.io/weex/cn/doc/components/loading.html

[yundongbot]

@Jam1zhu
可以通过 scroll-direction 设置滚动方向

[yundongbot]

@280772270
旧版示例 问题已经解决，
查看新版文档 http://alibaba.github.io/weex/cn/doc/components/scroller.html

示例： http://dotwe.org/7fbe9226cf9b98bce302ecf1cdae350f

[yundongbot]

@StanNing
试试新版示例
查看新版文档 http://alibaba.github.io/weex/cn/doc/components/scroller.html

示例： http://dotwe.org/7fbe9226cf9b98bce302ecf1cdae350f

[yundongbot]

@hyqinloveslife
wxc-tabbar 需要加上 require('weex-components'); ，具体信息可参考新文档 http://alibaba.github.io/weex/cn/doc/components/wxc/wxc-tabbar.html

[Nstd]

@RrtoyewxXu 具体的我也有点忘了，已经很久没用weex了，不知道官方有没有修掉那个bug，你可以下最新版的SDK试试看，用悬浮窗调试工具里的3D视图查看一下就知道了

[yundongbot]

本文档已迁移至 https://weex-project.io/cn/references/components/scroller.html ，此处不再维护，谢谢。

[beghujam]

scroller的滚动条在html5中不能隐藏啊，用了scroller 在html5上右侧出现滚动条好难看，用show-scrollbar这个属性，IOS 和安卓就隐藏掉了，但是在html5上还是存在 这个如何隐藏啊