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.如果滚动方向为水平,不会产生任何效果!

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小巫技术博客

Android开发随手记录-实现ListView单选设置item背景颜色和字体颜色

我们可以看到左边是一个listView,点击选中其中一项就会变成跟其他项不一样的背景颜色,字体颜色也会不一样,这样的效果怎么实现?

1653
来自专栏Java后端技术

让div等块级元素水平以及垂直居中的解决办法

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让d...

962
来自专栏一个爱瞎折腾的程序猿

一个简单的时间轴demo

1872
来自专栏Android开发指南

13.按比例显示图片、自定义属性、测量

38210
来自专栏一“技”之长

标签之美五——网页表格的设计 原

1、<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内。

921
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3726
来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

3227
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现手机上常见的ListMenuView

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

1114
来自专栏十月梦想

HTML表格

            4.cellspacing:外边距(单元格和单元格之间的距离)

4772
来自专栏前端技术总结

CSS自定义滚动条的样式

本文会介绍CSS滚动条选择器,并在演示中展示如何在Webkit的内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。

2.1K67

扫码关注云+社区

领取腾讯云代金券