在小程序里面如果用到scroll-view,就会看到这样一句话
使用竖向滚动时,需要给<scroll-view/>
一个固定高度,通过 WXSS 设置 height。
这是官方给出的文档,所以我们通常的做法这样的
<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;">
在wxml文件里面定义高度,然后通过
wx.getSystemInfo({
success: function (res) {
console.info(res.windowHeight);
that.setData({
scrollHeight: res.windowHeight
});
}
});
这个不是我今天要说的,我今天要说的是如果有头部怎么办?如何把头部的高度获取出来,并减掉头部的距离:
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
}).exec()
官方有这样一个api,然后把代码改成这样
wx.getSystemInfo({
success: function (res) {
console.info(res.windowHeight);
let height = res.windowHeight;
wx.createSelectorQuery().selectAll('.search-bar').boundingClientRect(function (rects) {
rects.forEach(function (rect) {
that.setData({
scrollHeight: res.windowHeight - rect.bottom
});
})
}).exec();
}
});
标红的地方是那个节点的class名字。
就到这。