<scroller> 组件 #40

Open
ding102992 opened this Issue Jun 29, 2016 · 29 comments

Projects

None yet
@ding102992
ding102992 commented Jun 29, 2016 edited

查看原文

概述

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等.

事件

公共事件: 查阅 公共事件

示例

<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
lvscar commented Jul 6, 2016

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

@vczero
vczero commented Aug 12, 2016

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

@ding102992

已更新。

@natman44

怎么是scroll变成横向滑动?

@vczero
vczero commented Aug 15, 2016

@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
StanNing commented Sep 8, 2016

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

@vczero
vczero commented Sep 9, 2016

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

@coderyi
coderyi commented Sep 13, 2016

scroller不一定的竖直的,文档开头就这样说??

@280772270

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

@ding102992

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

@280772270

现在弄懂了,谢谢啦

@Jam1zhu
Jam1zhu commented Oct 12, 2016

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

@Nstd
Nstd commented Oct 12, 2016 edited

有个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
Jam1zhu commented Oct 19, 2016

@Nstd 横屏滚动,能实现吗?

@Nstd
Nstd commented Oct 20, 2016

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

@hyqinloveslife

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

@RrtoyewxXu

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@Nstd
Nstd commented Dec 18, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment