Weex内置组件的使用——Weex的学习之路（五）

这几天忙着做组件化了，博客晚了些更新，说到组件化，我近期也会用博客来介绍的。上一篇博客我们讲的是weex的内置组件，那么这篇博客我们学习最后四个组件，下篇博客我们就会讲到世界weex页面的编写了。这篇博客我们来学习、

1.的简介和使用

组件是提供瀑布流布局的核心组件。瀑布流，又称瀑布流式布局是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局还可以不断加载数据块并附加至当前尾部。

的子组件

和 组件一样, 组件的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。

• ：用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。Weex 会对 进行高效的内存回收以达到更好的性能。
• ：当

  到达屏幕顶部时，吸附在屏幕顶部。
• ：用于给列表添加下拉刷新的功能。
• ： 用法与特性和 类似，用于给列表添加上拉加载更多的功能。

的属性

• show-scrollbar : [可选] 可选值为 true/ false，默认值为 true。控制是否出现滚动条。 [H5无效]
• column-count: [可选]描述瀑布流的列数
  • auto: 意味着列数是被其他属性所决定的(比如 column-width)
  • : 最佳列数，column-width 和 column-count 都指定非0值， 则 column-count 代表最大列数。
• column-width : [可选]描述瀑布流每一列的列宽
  • auto: 意味着列宽是被其他属性所决定的(比如 column-count)
  • : 最佳列宽，实际的列宽可能会更宽(需要填充剩余的空间)， 或者更窄(如果剩余空间比列宽还要小)。 该值必须大于0
• column-gap: [可选]列与列的间隙. 如果指定了 normal 。
• left-gap: [可选]左边cell和列表的间隙. 如果未指定 。
• right-gap: [可选]右边cell和列表的间隙. 如果未指定。

的事件

支持所有通用事件：

• click：用于监听点击事件。（例如：一般绑定于子组件之上触发跳转）。
• longpress：用于监听长按事件（一般绑定于子组件之上例如：手机淘宝猜你喜欢瀑布流，长按可删除您不感兴趣的商品）。
• appear：用于监听子组件出现事件（一般绑定于子组件之上例如：监听最后一个元素出现，加载新的数据）
• disappear：用于监听子组件滑出屏幕事件（一般绑定于子组件之上）

使用示例如下：

2.

Video 组件用于在页面中嵌入视频内容。

text 是唯一合法的子组件。

• src, string. 内嵌的视频指向的URL。
• play-status, string. 可选值为 play | pause，用来控制视频的播放状态，play 或者 pause，默认值是 pause。
• auto-play, boolean. 当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 false。
• poster, string, v0.18+ & iOS. 指定视频首图的图片链接。
• controls, string, v0.19+. 可选值为 controls | nocontrols，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 nocontrols 时不显示回放控制面板。

• start 当 playback 的状态是 Playing 时触发。
• pause 当 playback 的状态是 Paused 时触发。
• finish 当 playback 的状态是 Finished 时触发。
• fail 当 playback 状态是 Failed 时触发。

3.的简介和使用

的简介

用于在 WEEX 页面中显示由 src 属性指定的网页内容。

可以使 H5 与 Native 元素相结合。

• 您可以整个页面铺满 Web 页面（快速兼容您之前的 H5 页面）
• 可以使用 Web 和其他 Weex 组件合成复杂页面
• 使用 Web 组合出多种效果（设置透明背景的 H5 页面，灵活配置各类 H5 活动资讯）

特别注意事项

• 不支持任何嵌套的子组件。
• 必须指定 width 和 height 的样式属性，否则将不起作用。
• 您可以使用 webview module来控制 。

的属性

src是要加载的网页内容的 URL。建议指定线上真实存在的 URL 地址。

的事件

支持 appear 和 disappear 事件同时支持：

• pagestart 会在 Web 页面开始加载时调用。

  事件对象：

  • url: {String} 当前 Web 页面的 URL。

• pagefinish 会在 Web 页面完成加载时调用。

  事件对象：

  • url: {String} 当前 Web 页面的 URL。
  • canGoBack: {Boolean} 当前 Web 页面是否可以回退。
  • canGoForward: {Boolean} 当前 Web 页面是否可以前进。
  • title: {String} 当前 Web 页面的标题（仅限 iOS 平台）。

• error 会在 Web 页面加载失败时调用。

• receivedtitle 会在 Web 页面的标题发生改变时调用（仅限 Android 平台）。

4.的简介和使用

的简介

富文本组件可以内嵌 ````。同时它也支持 ```` 的嵌套。

只有 , and 可以包含在 标签里。 and 会被显示为 display:inline，而 会被显示为 display:inline-block。

的子节点分两种类型。

• and 可以再包含孩子节点。
• 不能再包含孩子节点。

富文本组件内部树形结构不能超过255层，超过的层会被忽略。

注意事项

• 标签在 iOS 上恒定为 color:blue 蓝色样式，它孩子节点也会被应用为该样式，见下面样例。Android 上无此限制。
• 标签必须指定 width 和 height.
• 在图片下载完成前， 会保持空白状态，目前不支持显示占位图。
• 富文本组件自身不能嵌套。
• , 和
  • 可以被继承
    • color
    • font-family
    • font-size
    • font-style
    • font-weight
    • line-height
  • 不可被继承
    • background-color
• • 可以被继承
    • text-decoration: none | underline | line-through, 默认值是 none
• • 不可被继承
    • lines: 最大行数，必须为正数。
• • 不可被继承
    • width
    • height
• 通用事件 支持所有通用事件。
• itemclick. 只有img和span标签可能触发，触发时机是:
  • img标签:
    • img被点击时没有任何父节点是 a
    • 如果第一个条件不满足，Weex 会尝试打开 a 标签指定的链接。
    • img 的 pseudo-ref 会作为参数传回来。

span标签:

• a标签中的span被点击
• 并且所在的a标签的href被指定为"click://"（这个条件iOS端强要求，Android端并不要求）
• a标签设置了pseudo-ref。此时itemclick事件会被触发，并且携带pseudo-ref的值。

的使用示例：

到此我们的weex组件就学习完了，下一篇博客我们来一起看看weex实际页面的编写。一套代码在Android和Ios上都是生效。