找节点(find an element) #3

Open
miaojing opened this Issue Jun 12, 2016 · 22 comments

Projects

None yet
@miaojing
miaojing commented Jun 12, 2016 edited

找节点

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) 方法可以访问子组件的上下文,用法见 组件封装

下一篇: 组件间如何通信

@miaojing miaojing changed the title from 文档翻译 - 找节点 to 文档翻译 - 找节点(find an element) Jun 12, 2016
@nicefe
nicefe commented Jun 16, 2016

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

@mrzzcn
mrzzcn commented Jun 19, 2016

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

@freeyiyi1993

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

@miaojing

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

@miaojing miaojing changed the title from 文档翻译 - 找节点(find an element) to 找节点(find an element) Jun 24, 2016
@MrRaindrop
MrRaindrop commented Jun 29, 2016 edited

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

@samyzhang

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

}
}
}

@wangzhen-cn
wangzhen-cn commented Jul 30, 2016 edited

$: $(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
shbIOS commented Aug 26, 2016

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

@wuchongzi

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

@liveforlife

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

@Jam1zhu
Jam1zhu commented Sep 28, 2016

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

@Jinjiang
Contributor

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

@zhangjh
zhangjh commented Sep 30, 2016
<span style="white-space: pre-wrap; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical;">Top</span>

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

@AlenGao
AlenGao commented Oct 8, 2016 edited

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
RaulZuo commented Nov 5, 2016

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

@xiaolongonly

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@DoranYun
DoranYun commented Dec 9, 2016

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

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