SelectorQuery.select
解释: 在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。
方法参数
String selector
返回值
NodesRef
selector 类似于 CSS 的选择器,但仅支持下列语法。
1、ID 选择器:#the-id2、class 选择器(可以连续指定多个):.a-class.another-class3、子元素选择器:.the-parent > .the-child4、后代选择器:.the-ancestor .the-descendant5、多选择器的并集:#a-node, .some-other-nodes
示例
扫码体验
请使用百度APP扫码
图片示例
代码示例1
<view class="container">
<view class="card-area">
<movable-area>
<movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
Drag
</movable-view>
</movable-area>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>
Page({
data: {
message: ''
},
onReady() {
const selectorQuery = swan.createSelectorQuery();
this.selectorQuery = selectorQuery;
},
queryNodeInfo() {
console.log(this.selectorQuery.select('.target'));// nodeRef: selector: ".target", queryType: "select"
this.selectorQuery.select('.target').boundingClientRect();
this.selectorQuery.exec(res => {
console.log(res[0].top)
this.setData('message', res[0].top);
});
}
});
代码示例2 - id选择器
<view class="container">
<view class="card-area">
<movable-area>
<movable-view id="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
Drag
</movable-view>
</movable-area>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>
Page({
data: {
message: ''
},
onReady() {
const selectorQuery = swan.createSelectorQuery();
this.selectorQuery = selectorQuery;
},
queryNodeInfo() {
console.log(this.selectorQuery.select('.target'));// nodeRef: selector: ".target", queryType: "select"
this.selectorQuery.select('#target').boundingClientRect();
this.selectorQuery.exec(res => {
console.log(res[0].top)
this.setData('message', res[0].top);
});
}
});
代码示例3 - 多个class选择器
<view class="container">
<view class="card-area">
<movable-area>
<movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
Drag
</movable-view>
<movable-view class="target2" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
Drag2
</movable-view>
</movable-area>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>
Page({
data: {
message: ''
},
onReady() {
const selectorQuery = swan.createSelectorQuery();
this.selectorQuery = selectorQuery;
},
queryNodeInfo() {
console.log(this.selectorQuery.select('.target.target2'));// nodeRef: selector: ".target", queryType: "select"
this.selectorQuery.select('.target.target2').boundingClientRect();
this.selectorQuery.exec(res => {
console.log(res)
// this.setData('message', res[0].top);
});
}
});
代码示例4 - 后代选择器
<view class="container">
<view class="card-area">
<movable-area>
<movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
<view class="block"> Drag</view>
</movable-view>
</movable-area>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>
Page({
data: {
message: ''
},
onReady() {
const selectorQuery = swan.createSelectorQuery();
this.selectorQuery = selectorQuery;
},
queryNodeInfo() {
console.log(this.selectorQuery.select('.target>.block'));// nodeRef: selector: ".target", queryType: "select"
this.selectorQuery.select('.target>.block').boundingClientRect();
this.selectorQuery.exec(res => {
console.log(res)
// this.setData('message', res[0].top);
});
}
});
代码示例5 - 多个选择器
<view class="container">
<view class="card-area">
<movable-area>
<movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
<view class="block"> Drag</view>
</movable-view>
<movable-view id="target2" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
<view class="block"> Drag</view>
</movable-view>
</movable-area>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>
Page({
data: {
message: ''
},
onReady() {
const selectorQuery = swan.createSelectorQuery();
this.selectorQuery = selectorQuery;
},
queryNodeInfo() {
console.log(this.selectorQuery.select('.target, #block'));// nodeRef: selector: ".target", queryType: "select"
this.selectorQuery.select('.target, #block').boundingClientRect();
this.selectorQuery.exec(res => {
console.log(res)
// this.setData('message', res[0].top);
});
}
});