swan.createSelectorQuery

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

# 方法参数

# 返回值

SelectorQuery

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

# 代码示例

    <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;
    }