Weex語法——找節(jié)點(diǎn)

weex中,可以通過在特定的節(jié)點(diǎn)上設(shè)置 id 屬性,以此來唯一標(biāo)識(shí)該節(jié)點(diǎn)。然后可以用 this.$el(id)來找到該節(jié)點(diǎn),以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語法中使用,更多詳見 展示邏輯控制,但是要確保循環(huán)的節(jié)點(diǎn)需要用不同的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) 方法可以訪問子組件的上下文,用法見 組件封裝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,180評(píng)論 0 29
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,374評(píng)論 0 6
  • 前言 Weex為了提高Native的極致性能,做了很多優(yōu)化的工作 為了達(dá)到所有頁面在用戶端達(dá)到秒開,也就是網(wǎng)絡(luò)(J...
    一縷殤流化隱半邊冰霜閱讀 13,528評(píng)論 11 73
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,654評(píng)論 19 139
  • 今天就是周日了,明天就要上班了,感覺很不舍啊。 今天把編程神課和算法課前面的部分已經(jīng)學(xué)完了。明天就可以進(jìn)入正題了。...
    愛跑步的coder閱讀 192評(píng)論 0 0

友情鏈接更多精彩內(nèi)容