找节点（find an element）

[miaojing]

新版中文网站及文档已经上线，请访问 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) 方法可以访问子组件的上下文，用法见 组件封装。

下一篇： 组件间如何通信

[nicefe]

第一个事例在weex版本0.1.1当中只有this.$scrollTo('top') 是有效的，this.$scrollTo(top)无效了，不知道是不是移除了通用的写法。

[mrzzcn]

@nicefe scrollTo 过期了, 现在改成 scrollToElement 了

[freeyiyi1993]

issue里面的链接404了，eg 上面 模块封装的链接。 建议修改下~

[miaojing]

@freeyiyi1993 已换链接，之前后翻译的issue还没有链接~

[MrRaindrop]

this.$(id)以及this.$('top')应改为this.$el(id)和this.$el('top') ，原文档有误，已提更改 @miaojing

[samyzh]

部分没有更新上，现在原文档是这样的：
var dom = require('@weex-module/dom')
module.exports = {
methods: {
back2Top: function () {
var top = this.$el('top')
dom.scrollToElement(top)
}
}
}

[wangzhen-cn]

$: $(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')

[emptywalker]

getImageId: function(e) {
// get e.target.id
}
用e.target.id不能够获取其id

[shbIOS]

最新版本中，貌似不支持this.$scrollToElement(id) 功能，
报错： Uncaught TypeError: this.$scrollToElement is not a function

[facelesswu]

试了一下，安卓上好像不起作用啊，在浏览器上调试倒是可以

[liveforlife]

在安卓上不起作用，在浏览器上可以运行，是不兼容吗？

[Jam1zhu]

这个已经作废了，改成了scrollElementTo();
https://alibaba.github.io/weex/doc/modules/dom.html

[Jinjiang]

@liveforlife @Jam1zhu 感谢指正，已经把旧的描述更新了

[zhangjh]

<span style="white-space: pre-wrap; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical;">Top</span>

比较好奇，weex渲染后的style是怎么加上去的？源码里并没有给top设置样式啊

[AlenGao]

methods: {
getImageId: function(e) {
// get e.target.id
}
}
e.target.id是undefined
e.target中没有id这个属性

[codercuixin]

<script> module.exports = { data: { images: [ {imgId: 1, imgUrl: 'http://t.cn/RGE3uo9'}, {imgId: 2, imgUrl: 'http://t.cn/RGE3uo9'}, {imgId: 3, imgUrl: 'http://t.cn/RGE3uo9'}, ] }, methods: { getImageId: function(e) { console.log(e.target.id) ; } } } </script>

e.target.id是undefined
没有这个属性啊

[RaulZuo]

能解释下 var dom = require('@weex-module/dom');这个引用是起什么作用的呢

[xiaolongonly]

methods: {
getImageId: function(e) {
// get e.target.id
}
} 把e打印了一下确实没在target里面找到id这个属性

[yundongbot]

@nicefe $scrollTo 已经被弃用，请使用 dom 模块的 $scrollToElement .参考文档 https://alibaba.github.io/weex/cn/doc/modules/dom.html

[yundongbot]

@freeyiyi1993 新版文档已经整合完毕，请猛击 https://alibaba.github.io/weex/cn/doc/

[yundongbot]

@liveforlife 试试新版文档里的例子 https://alibaba.github.io/weex/cn/doc/syntax/id.html 。应该能跑得起来才对。

[yundongbot]

@RaulZuo dom module 提供了常用的 dom API

[yundongbot]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。

[gaona233]

我如何知道scrollToElement这个函数已经执行完成，好像没有callback @DoranYun

[yundongbot]

@xialulu 你可以监听滚动元素的 appear 事件