weex-20-scroller组件

本节学习目标

掌握scroller组件的使用

概念

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

使用途径

• 如果我们想要根组件也可以滑动的效果,就可以使用组件
• 水平滚动的视图
• 多个滚动视图嵌套

注意事项

1.滑动组件默认方向为垂直
2.支持任意类型的 Weex 组件作为其子组件(除了cell组件,它只能用于list)
3.可以使用组件 和 组件
4.垂直时,当子标签的高度没有超过scroller的高度时, 没有滚动效果，并且不会出现滚动条

掌握以下技能(请使用真机测试)

• 如何控制滚动条的显示或者隐藏
  how-scrollbar值为true或者false,这个是标签的属性,不是样式,不能写在css样式表里,具体使用如下

• 定义滚动的方向

scroll-direction 值为horizontal 水平滚动,值为vertical 垂直滚动

注意

1.如果你给设置了flex-direction的样式,那么这个属性会被忽略
2.网页显示默认为垂直,无论你怎么修改这个值都不会产生影响,这个是个坑请务必注意.

• loadmore 事件

提示:

1.loadmoreoffset 滚动条离组件底部的距离,默认为0,这个值决定什么时候触发loadmore事件,修改它的值,你就明白了。
2.loadmore 事件 当滚动条距离底部的值等于loadmoreoffset 时,触发这个事件
3.如果滚动方向为水平,不会产生任何效果!

思考:如何滚动到指定的位置 ?