Skip to content

Element

Element 是所有组件的基类,Element 描述了所有组件所普遍具有的方法和属性。一些组件继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。

xml属性

属性类型说明
datasetObject标签上通过 data-* 设置的属性会存到 dataset 字段,方便记录一些节点信息

属性

dataset

标签上通过 data-* 设置的属性会存到 dataset 字段,方便记录一些节点信息。

classList: ClassList

返回一个元素 class 属性的集合,通过 ClassList 可以动态操作元素的 class 集合,需要特别注意的是,id 会默认添加到 class 集合

js
// <view id="container" class="info"></view>
const container = Layout.getElementById('container');

console.log(container.classList.value); // `container info`

container.classList.add('test');

container.classList.remove('test');

style

元素的样式集合,可以通过 style 属性动态修改样式。

js
let testText = Layout.getElementById('testText');

testText.style.backgroundColor = '#f3f3f3'

方法

getElementsById(elementId: string): Element[]

获取元素id为elementId的一组元素,之所以是一组元素是因为这里 id 的实现没有对齐 Web,id并不是唯一的,只是一个标识。

js
// <view id="container"></view>
const container = Layout.getElementsById('container')[0];

getElementById

兼容性

v1.0.1版本开始支持

Layout.getElementById(String elementId)

获取元素id为elementId的第一个节点,id唯一性由业务侧自行保证。

js
// <view id="container"></view>
const container = Layout.getElementById('container');

getElementsByClassName(className: string): Element[]

获取包含class为className的一组元素。

js
/**
 * <view id="container">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
   </view>
 */
const list = Layout.getElementsByClassName('item');

console.log(list.length); // 3

getBoundingClientRect(): Rect

返回一个组件在canvas画布中的位置和尺寸信息。

getViewportRect(): Rect

返回一个组件在屏幕中的位置和尺寸信息,前提是正确调用updateViewPort

appendChild(ele: Element)

给一个组件添加子节点,这通常用于拷贝A组件之后添加到A组件的父容器,避免重新执行 Layout.init 流程,提升性能。

js
// 获取 ScrollView
const list = Layout.getElementsByClassName('list')[0];
// 获取列表的每一项
const listItem = list.getElementsByClassName('listItem');

listItem.forEach(item => {
  list.appendChild(Layout.cloneNode(item))
});

removeChild(ele: Element)

移除给定的子节点

remove()

将节点从当前节点树中删除

事件

通过 getElementsById 或者 getElementsByClassName 获取元素之后,可以的绑定事件,支持的事件有touchstarttouchmovetouchendtouchcancelclickscroll(只有scrollview支持)示例如下:

js
const list = Layout.getElementsByClassName('listItem');

list.forEach(item => {
  item.on('touchstart', (e) => {
    console.log(e, item);
  });
});