article
article copied to clipboard
weexteam
找节点（find an element）
新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。
找节点
weex中，可以通过在特定的节点上设置 id 属性，以此来唯一标识该节点。然后可以用 this.$el(id)来找到该节点，以scrollToElement() 为例，如下：
<template>
<container>
<text id="top">Top</text>
<container style="height: 10000; background-color: #999999;">
</container>
<text onclick="back2Top">Back to Top</text>
</container>
</template>
<script>
var dom = require('@weex-module/dom');
module.exports = {
methods: {
back2Top: function () {
var top = this.$el('top')
dom.scrollToElement(top, { offset: 10 })
}
}
}
</script>
id 也可以在 repeat语法中使用，更多详见 展示逻辑控制，但是要确保循环的节点需要用不同的id，如下:
<template>
<container>
<image id="{{imgId}}" src="{{imgUrl}}" onclick="getImageId" repeat="{{images}}"></image>
</container>
</template>
<script>
module.exports = {
data: {
images: [
{imgId: 1, imgUrl: '...'},
{imgId: 2, imgUrl: '...'},
{imgId: 3, imgUrl: '...'},
...
]
},
methods: {
getImageId: function(e) {
// get e.target.id
}
}
}
</script>
另外，我们可以通过this.$vm(id) 方法可以访问子组件的上下文，用法见 组件封装。
下一篇： 组件间如何通信
第一个事例在weex版本0.1.1当中只有this.$scrollTo('top') 是有效的，this.$scrollTo(top)无效了，不知道是不是移除了通用的写法。
this.$(id)以及this.$('top')应改为this.$el(id)和this.$el('top') ，原文档有误，已提更改 @miaojing
部分没有更新上，现在原文档是这样的： var dom = require('@weex-module/dom') module.exports = { methods: { back2Top: function () { var top = this.$el('top') dom.scrollToElement(top) } } }
$: $(id) $broadcast: $broadcast(type, detail) $call: $call(moduleName, methodName) $dispatch: $dispatch(type, detail) $el: $el(id) $emit: $emit(type, detail) $getConfig: $getConfig(callback) $off: $off(type, handler) $on: $on(type, handler) $openURL: $openURL(url) $renderThen: $renderThen(fn) $scrollTo: $scrollTo(id, offset) $sendHttp: $sendHttp(params, callback) $setTitle: $setTitle(title) $transition: $transition(id, options, callback) $vm: $vm(id)
用法很简单 this.$scrollTo('top')
最新版本中，貌似不支持this.$scrollToElement(id) 功能， 报错： Uncaught TypeError: this.$scrollToElement is not a function
这个已经作废了，改成了scrollElementTo(); https://alibaba.github.io/weex/doc/modules/dom.html
<span style="white-space: pre-wrap; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical;">Top</span>
比较好奇，weex渲染后的style是怎么加上去的？源码里并没有给top设置样式啊
methods: { getImageId: function(e) { // get e.target.id } } e.target.id是undefined e.target中没有id这个属性
methods: {
getImageId: function(e) {
// get e.target.id
}
} 把e打印了一下确实没在target里面找到id这个属性
@nicefe $scrollTo 已经被弃用，请使用 dom 模块的 $scrollToElement .参考文档 https://alibaba.github.io/weex/cn/doc/modules/dom.html
@liveforlife 试试新版文档里的例子 https://alibaba.github.io/weex/cn/doc/syntax/id.html 。应该能跑得起来才对。
