如何调用dom查询特定的ref节点信息_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

dom 模块用于对卡片的组件节点进行一部分特定操作。例如可以用它来查询特定的 ref 节点信息。

selectorQuery(queries, callback)

该方法可以查询节点的相关信息，包括所在区域、所在页面的位置等信息。

参数	类型	说明	备注
queries	array	要查询的节点信息数组。 ref：要查询的节点。 type：要查询的信息类型，支持 rect、scroll、viewport。每个元素都是一个键值对。	只有可滚动组件可查询 scroll type。


callback	function(e)	执行完成后的回调。 e.result_key 为 result，value 为查询到的数据的数组。	不同查询 type 的 value key 不一样。具体如下： rect left top bottom right width height scroll scrollLeft scrollTop viewport width height

示例代码

<template>
    <scroller class="root">
        <text class="message bgColor" ref="text" :value="data" @click="onClick()"></text>
    </scroller>
</template>

<script>
          //引入模块
    const dom = requireModule("dom");
    export default {
        data: {
            data : "点我刷新"
        },
        onCreated() {
            dom.selectorQuery([{ref:"text", type: "rect"}, {ref:"text", type: "viewport"}], (e)=>{
                var results = e.result;
                for (var i = 0; i < results.length; i++) {
                    if (i == 0) {
                        var r = results[0];
                        this.textRect = JSON.stringify(r);
                    }
                    if (i == 1) {
                        var r = results[1];
                        this.textViewPort = JSON.stringify(r);
                    }
                }
            });
        }        
    }
</script>

<style>
    .root {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
        width: 100%;
        height: 500px;
    }

    .bgColor {
        background-color: gray;
    }

    .message {
        color: black;
        font-size: 50rpx;
    }
</style>

单击此处 detailDom.zip 获取完整示例代码。