微信小程序如何获取页面高度?
作者:互联网
可以通过获取系统信息来获取页面的高度。具体方法如下:
-
使用
wx.getSystemInfoSync()
:可以同步获取系统信息,包括屏幕高度、状态栏高度等。通过这些信息可以计算出可用的页面高度。 -
使用
wx.createSelectorQuery()
:可以获取特定元素的高度。
以下是这两种方法的示例代码:
方法 1: 使用 wx.getSystemInfoSync()
const systemInfo = wx.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight; // 获取窗口高度
const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
console.log('窗口高度:', windowHeight);
console.log('状态栏高度:', statusBarHeight);
// 你可以计算出可用的高度
const usableHeight = windowHeight - statusBarHeight;
console.log('可用高度:', usableHeight);
JavaScript
方法 2: 使用 wx.createSelectorQuery()
如果你想获取某个具体元素的高度,可以使用选择器查询。
const query = wx.createSelectorQuery();
query.select('.your-selector') // 替换为你想要获取高度的元素的选择器
.boundingClientRect(rect => {
console.log('元素高度:', rect.height);
})
.exec();
标签: 来源: