Weex内置组件及通用事件(一)

1.内置组件

1.1

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

1.2

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

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

属性

  1. src
    类型:string
    值:{URL / Base64}
    要显示图片的URL,该属性是的强制属性。
    注意:可以指定一个相对bundle URL的相对路径,相对路径将被重写为绝对资源路径(本地或远程)。
  2. placeholder
    类型:string
    值:{URL / Base64}
    占位图的URL,当由src表示的图片下载完成并展示后将被删除。
  3. resize
    类型:string
    值:cover/contain/stretch(默认值)
    Weex内置组件及通用事件(一)_第1张图片
    contain:缩放图片以完全装入区域,可能背景区部分空白。
    cover:缩放图片以完全覆盖区域,可能图片部分看不见。
    stretch:按照区域的宽高比例缩放图片。

示例

<image :style="{'width':bgWidth,'height': bgHeight}" src="https:// images/xxx.png">image> 


2.通用事件

2.1Page事件

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

事件对象
- type:viewappear或viewdisappear
- target:触发事件的组件对象
- timestamp:事件被触发时的时间戳



上文:Weex简介及环境搭建(mac版)

更多内容,欢迎关注微信公众号“让知识成为资产”。

你可能感兴趣的:(Weex内置组件及通用事件(一))