Element
Element 是所有组件的基类,Element 描述了所有组件所普遍具有的方法和属性。一些组件继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。
xml属性
属性 | 类型 | 说明 |
---|---|---|
dataset | Object | 标签上通过 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 获取元素之后,可以的绑定事件,支持的事件有touchstart
、touchmove
、touchend
、touchcancel
、click
、scroll(只有scrollview支持)
示例如下:
js
const list = Layout.getElementsByClassName('listItem');
list.forEach(item => {
item.on('touchstart', (e) => {
console.log(e, item);
});
});