本节学习目标
掌握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.如果滚动方向为水平,不会产生任何效果!
思考:如何滚动到指定的位置 ?
