Weex语法——找节点

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,081评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,244评论 0 6
  • 前言 Weex为了提高Native的极致性能,做了很多优化的工作 为了达到所有页面在用户端达到秒开,也就是网络(J...
    一缕殇流化隐半边冰霜阅读 13,395评论 11 73
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 今天就是周日了,明天就要上班了,感觉很不舍啊。 今天把编程神课和算法课前面的部分已经学完了。明天就可以进入正题了。...
    爱跑步的coder阅读 166评论 0 0