1、 官网例子----wx.createSelectorQuery()
微信小程序-wx.createSelectorQuery()——获取页面中界面上的节点信息上的是在Page中获取的
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
})
2、在Component中获取界面节点信息
我在用colorUI中的verticalNav时，发现其中一段代码我用了之后有问题，
这个方法是绑定在右边scroll-view的bindscroll的，主要作用是取到右边模块的宽度高度，从而设置右边scroll-view 的scroll-top属性（设置竖向滚动条位置）
VerticalMain(e) {
let that = this;
let list = this.data.list;
let tabHeight = 0;
if (this.data.load) {
console.log(list)
for (let i = 0; i < list.length; i++) {
let view = wx.createSelectorQuery().select("#main-" + list[i].id);//执行到这里，发现下面的view.fields的callback 返回的永远是null
view.fields({
size: true
}, data => {
list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
list[i].bottom = tabHeight;
}).exec();
}
that.setData({
load: false,
list: list
})
console.log(list)
}
let scrollTop = e.detail.scrollTop + 20;
for (let i = 0; i < list.length; i++) {
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
that.setData({
VerticalNavTop: (list[i].id - 1) * 50,
TabCur: list[i].id
})
return false
}
}
}
问题：执行到这里，发现下面的view.fields的callback 返回的永远是null，
后来发现我的是一个Component，不能直接这么用
----------------------修改前-------------------------------
let view = wx.createSelectorQuery().select("#main-" + list[i].id);
view.fields({
size: true
}, data => {
list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
list[i].bottom = tabHeight;
}).exec();
}
----------------------修改后-------------------------------
let view = wx.createSelectorQuery().in(this).select("#main-" + list[i].id);
其他不变
示例
Component({
queryMultipleNodes (){
const query = wx.createSelectorQuery().in(this)
query.select('#the-id').boundingClientRect(function(res){
res.top // 这个组件内 #the-id 节点的上边界坐标
}).exec()
}
})