其他分享
首页 > 其他分享> > 微信小程序如何获取页面高度?

微信小程序如何获取页面高度?

作者:互联网

可以通过获取系统信息来获取页面的高度。具体方法如下:

  1. 使用 wx.getSystemInfoSync():可以同步获取系统信息,包括屏幕高度、状态栏高度等。通过这些信息可以计算出可用的页面高度。

  2. 使用 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();

标签:
来源: