SelectorQuery.exec

2020-08-22 10:56 更新

解釋: 執(zhí)行所有的請(qǐng)求,請(qǐng)求結(jié)果按請(qǐng)求次序構(gòu)成數(shù)組,在 callback 的第一個(gè)參數(shù)中返回。

方法參數(shù)

Function callback

示例 

在開發(fā)者工具中打開



圖片示例



代碼示例

<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('節(jié)點(diǎn)信息:', 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;
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)