< dom > 模块 #52

Open
TiaossuP opened this Issue Jul 23, 2016 · 10 comments

Projects

None yet

7 participants

@TiaossuP
TiaossuP commented Jul 23, 2016 edited

原文在这

概述

包含如下可以更新dom树的dom API。

这部分API是通过把 virtual-dom 的消息发送到native渲染器来做到的。

开发者在日常开发中,唯一可在.we文件中使用的是scrollToElement
你也可以调用$scrollTo方法来使用它

这个页面提及的其他的API,只在callNative进程中的native渲染器用。
(关于callNative进程的进一步介绍,可以在How it works中的JS Framework部分看到 )

API

scrollToElement(node, options)

让页面滚动到那个对应的节点,这个API只能在scrollerlist组件中用。

这个API也能通过调用VM的方法$scrollTo来使用(已弃用)

要在你的.we文件中使用这个API,可以使用require('@weex-module/dom').scrollToElement

参数

  • node(Node): 你要滚动到的那个节点
  • options(object): 如下选项
    • offset(number): 一个到其可见位置的偏移距离,默认是0

示例

var dom = require('@weex-module/dom');
dom.scrollToElement(this.$el('someId'), {offset: 10});

createBody(element)

为整个dom树创建body。
元素(Element)的类型只能是某种能被当做根节点的元素(包括div,scroller,list

参数

  • element(object): 一个用来指定节点各项信息的对象,包括ref, type, children等。

addElement(parentNode, element, index)

把一个元素加到dom树中

参数

  • parentNode(Node): 指定元素父节点.
  • element(object): 要加到dom树中的这个节点的各项信息.
  • index(number): 插入位置.

removeElement(node)

从dom树中移除节点

参数

  • node(Node): 要被移除的节点

moveElement(node, parentNode, index)

把一个已存在的节点移到另一个节点下面的指定位置(也可以不改变父节点,而只改变指定节点在父节点下面的位置)

参数

  • node(Node): 将要被移动的节点
  • parentNode(Node): 将要移动到的父节点
  • index(number):: 将要被放到的父节点里面的第几个位置。

addEvent(node, type)

通知渲染器有针对某事件(event)的监听器

参数

  • node(Node): 将要被监听的节点
  • type(string): 将要监听的事件类型。

removeEvent(node, type)

移除某节点的某个监听器

参数

  • node(Node): 将要被移除某监听器的节点
  • type(string): 将要被移除的节点类型

updateAttrs(node, attr)

给某个节点更新某个属性

参数

  • node(Node): 要被更新的节点
  • attr(object): 包含所有要被更新的属性。

updateStyle(node, style)

为某个节点改变样式

参数

  • node(Node): 将要被改变的节点
  • style(object): 包含所有要被改变的样式规则。

createFinish()

通知native渲染器,让其更新本已结束的native dom 树

原文:Notify native renders that the series of messages for updating the native dom tree have reached a end.

refreshFinish()

通知native渲染器,让其刷新本已结束native dom 树

原文:Notify native renders that the series of messages for refreshing a native dom tree have reached a end.

@TiaossuP TiaossuP changed the title from < dom > 组件 to < dom > 模块 Jul 24, 2016
@lvscar
lvscar commented Jul 26, 2016

thx @TiaossuP, 文档站已添加译文链接.

@Jam1zhu
Jam1zhu commented Oct 13, 2016

android端,require('@weex-module/dom').updateAttrs() 报错,是什么原因?
同一个文件,在ios端没问题,在android端不行

@Jinjiang
Contributor

@Jam1zhu https://github.com/alibaba/weex/blob/dev/doc/specs/virtual-dom-apis.md 这里有一些更多的描述,总体上 dom 模块除了 scrollToElement,其它的都是一比较底层的 API,这里只是做个备忘,也不建议上层业务使用
文档的问题我们已经在规划新的版本并重新整理了,见谅

@Nstd
Nstd commented Oct 18, 2016

@Jinjiang 请问新文档大概什么时候上线呢?

@Jinjiang
Contributor

预计会在双十一之后了,最近大家主要精力还是会放在双十一的业务支持上

@Nstd
Nstd commented Oct 18, 2016

@Jinjiang 👌

@wzj583585700

var dom = require('@weex-module/dom');
module.exports = {
methods: {
back2Top: function () {
alert('nihao')
var top = this.$el('top')
dom.scrollToElement(top,{offset: 200});
}
}
}
不起作用啊

@DoranYun
DoranYun commented Dec 9, 2016

@wzj583585700
你的代码有误,alert() 需要引入 modal 模块。
可参考新文档 http://alibaba.github.io/weex/cn/doc/modules/dom.html

@Nstd
Nstd commented Dec 18, 2016

@DoranYun 谢谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment