Weex内置组件及通用事件

Posted 2021-04-29 让知识成为资产

1.内置组件

1.1<div>

<div>组件是用于包装其它组件的最基本容器。支持所有的通用样式、特性、flexbox布局。
其类似于html的<div>容器，但不能直接在里面添加文本（字符串），如果要展示文本，应该使用<text>组件。历史版本中，<div>别名是<container>，目前已经弃用。
注意：<div>嵌套层级不可过深，否则容易引起性能问题，建议控制在10层以内。

1.2<image>

<image>用于在界面中显示单个图片。
注意：在HTML中通常使用的<img>标签在weex中不支持，应该使用<image>。
Weex没有内置的图片下载器，因为相关的下载、缓存、解码机制非常复杂，一些开源的工具如SDWebImage 已经处理得很好，所以在使用<image>之前，要在native侧先接入相应的adapter或handler。

基本用法
必须指定样式中的宽度和高度，否则无法工作。

属性
1.src
类型：string
值：{URL / Base64}
要显示图片的URL，该属性是<image>的强制属性。
注意：可以指定一个相对bundle URL的相对路径，相对路径将被重写为绝对资源路径(本地或远程)。

2.placeholder
类型：string
值：{URL / Base64}
占位图的URL，当由src表示的图片下载完成并展示后将被删除。

3.resize
类型：string
值：cover/contain/stretch(默认值)

contain:缩放图片以完全装入<image>区域，可能背景区部分空白。
cover:缩放图片以完全覆盖<image>区域，可能图片部分看不见。
stretch:按照<image>区域的宽高比例缩放图片。

示例

<image :style="{'width':bgWidth,'height':bgHeight}" ></image>

2.通用事件

2.1Page事件

weex通过viewappear和viewdisappear事件提供了简单的页面状态管理能力。
viewappear事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用navigator模块的push方法时，该事件将会在打开新页面时被触发。
viewdisappear事件会在页面就要关闭时被触发。
viewappear和viewdisappear事件关注的是整个页面的状态，所以它们必须绑定到页面的根元素上。
特殊情况下，这两个事件也能绑定到非根元素的body组件上，例如wxc-navpage组件。

事件对象

• type:viewappear或viewdisappear

• target:触发事件的组件对象

• timestamp:事件被触发时的时间戳

更多内容，长按二维码关注

上文：