SelectorQuery.select

解釋： 在當(dāng)前頁(yè)面下選擇第一個(gè)匹配選擇器 selector 的節(jié)點(diǎn)，返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。

方法參數(shù)

String selector

返回值

NodesRefselector 類似于 CSS 的選擇器，但僅支持下列語(yǔ)法。

1. ID 選擇器：#the-id
2. class 選擇器（可以連續(xù)指定多個(gè)）：.a-class.another-class
3. 子元素選擇器：.the-parent > .the-child
4. 后代選擇器：.the-ancestor .the-descendant
5. 多選擇器的并集：#a-node, .some-other-nodes

示例

圖片示例

代碼示例 1 

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

<view class="wrap">
    <view class="card-area">
        <movable-area>
            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all">
                Drag
            </movable-view>
        </movable-area>
        <button bindtap="queryNodeInfo">點(diǎn)擊獲取節(jié)點(diǎn)信息</button>
        <view class="list-area border-bottom">
            <text>Drag的節(jié)點(diǎn)信息高度為：</text>
            <text class="list-item-value-6">{{message}}</text>
        </view>
    </view>
</view>

Page({
    data: {
        message: ''
    },
    onReady() {
        this.selectorQuery = swan.createSelectorQuery();
    },
    queryNodeInfo() {
        console.log(this.selectorQuery.select('.target'));
        // nodeRef: selector: ".target", queryType: "select"
        this.selectorQuery
            .select('.target')
            .boundingClientRect()
            .exec(res => {
                console.log('節(jié)點(diǎn)信息：', res[0]);
                this.setData('message', res[0].top);
            });
    }
});

代碼示例 2：id 選擇器 

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

<view class="wrap">
    <view class="card-area">
        <movable-area>
            <movable-view id="target" x="{{x}}" y="{{y}}" direction="all">
                Drag
            </movable-view>
        </movable-area>
        <button bindtap="queryNodeInfo">點(diǎn)擊獲取節(jié)點(diǎn)信息</button>
        <view class="list-area border-bottom">
            <text>Drag的節(jié)點(diǎn)信息高度為：</text>
            <text class="list-item-value-6">{{message}}</text>
        </view>
    </view>
</view>

Page({
    data: { 
        message: ''
    },
    onReady() {
        this.selectorQuery = swan.createSelectorQuery();
    },
    queryNodeInfo() {
        console.log(this.selectorQuery.select('#target'));
        // nodeRef: selector: ".target", queryType: "select"
        this.selectorQuery
            .select('#target')
            .boundingClientRect()
            .exec(res => {
                console.log('節(jié)點(diǎn)信息：', res[0]);
                this.setData('message', res[0].top);
            });
    }
});

代碼示例 3: 多個(gè) class 選擇器 

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

<view class="wrap">
    <view class="card-area">
        <movable-area>
            <movable-view class="target target2" x="{{x}}" y="{{y}}" direction="all">
                Drag
            </movable-view>
        </movable-area>
        <button bindtap="queryNodeInfo">點(diǎn)擊獲取節(jié)點(diǎn)信息</button>
        <view class="list-area border-bottom">
            <text>Drag的節(jié)點(diǎn)信息高度為：</text>
            <text class="list-item-value-6"> {{message}}</text>
        </view>
    </view>
</view>

Page({
    data: { 
        message: ''
    },
    onReady() {
        this.selectorQuery = swan.createSelectorQuery();
    },
    queryNodeInfo() {
        console.log(this.selectorQuery.select('.target.target2'));
        // nodeRef: selector: ".target", queryType: "select"
        this.selectorQuery.select('.target.target2').boundingClientRect();
        this.selectorQuery.exec(res => {
            this.setData('message', res[0].top);
        });
    }
});

代碼示例 4: 子元素選擇器 

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

<view class="wrap">
    <view class="card-area">
        <movable-area>
            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all">
                <view class="block"> Drag</view>
            </movable-view>
        </movable-area>
        <button bindtap="queryNodeInfo">點(diǎn)擊獲取節(jié)點(diǎn)信息</button>
        <view class="list-area border-bottom">
            <text>Drag的節(jié)點(diǎn)信息高度為：</text>
            <text class="list-item-value-6"> {{message}}</text>
        </view>
    </view>
</view>

Page({
    data: { 
        message: ''
    },
    onReady() {
        this.selectorQuery = swan.createSelectorQuery();
    },
    queryNodeInfo() {
        console.log(this.selectorQuery.select('.target>.block'));
        // nodeRef: selector: ".target", queryType: "select"
        this.selectorQuery.select('.target>.block').boundingClientRect();
        this.selectorQuery.exec(res => {
            this.setData('message', res[0].top);
        });
    }
});