百度智能小程序 返回SelectorQuery

swan.createSelectorQuery

解释： 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

方法参数

无

返回值

SelectorQuery

示例 

在开发者工具中打开

图片示例

代码示例

<view class="wrap">
    <view class="card-area">
        <movable-area>
            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
                Drag
            </movable-view>
        </movable-area>
        <view s-for="item in metrics" class="list-area border-bottom">
            <text class="list-item-key-4">{{item.key}}</text>
            <text class="list-item-value">{{item.val}}</text>
        </view>
    </view>         
</view>

Page({
    data: {
        metrics: []
    },
    onReady() {
        this.queryNodeInfo();
    },
    queryNodeInfo() {
        const query = swan.createSelectorQuery();
        query.select('.target').boundingClientRect();
        query.exec(res => {
            console.log('节点信息：', res[0]);
            const rect = res[0];
            if (rect) {
                const metrics = []
                for (const key in rect) {
                    if (key !== 'id' && key !== 'dataset') {
                        const val = rect[key];
                        metrics.push({key, val});
                    }
                }
                this.setData({metrics});
            }
        });
    }
});

movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    width: 100rpx;
    background: #38f;
    color: #fff;  
}

movable-area {
    height: 400rpx;
    width: 400rpx;
    background-color: #ccc;
    overflow: hidden;
}