weex-20-scroller组件

本节学习目标

掌握scroller组件的使用

概念

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

使用途径

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

注意事项

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

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

• 如何控制滚动条的显示或者隐藏 how-scrollbar值为true或者false,这个是标签的属性,不是样式,不能写在css样式表里,具体使用如下 <scroller class="scroller" show-scrollbar='false'>
• 定义滚动的方向

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

<scroller class="scroller" show-scrollbar='true' scroll-direction='horizontal' >

注意

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

• loadmore 事件 <scroller class="scroller" show-scrollbar='true' scroll-direction='vertical' @loadmore="onloadmore" loadmoreoffset="0">

提示:

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

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