小程序怎么获取屏幕高度

时间:2025-01-22 17:43:33 游戏攻略

在微信小程序中,可以通过以下方法获取屏幕高度:

使用 `wx.getSystemInfo` API

在页面的 `onLoad` 或 `onReady` 生命周期函数中调用 `wx.getSystemInfo` 方法,该方法返回一个对象,其中包含屏幕宽度和高度信息。

示例代码:

```javascript

Page({

onLoad: function () {

const that = this;

wx.getSystemInfo({

success: function (res) {

that.setData({

screenHeight: res.screenHeight,

windowHeight: res.windowHeight

});

}

});

}

});

```

使用 `wx.createSelectorQuery`

通过选择器查询页面中的某个元素,获取其高度。

示例代码:

```javascript

Page({

onReady: function () {

const that = this;

const query = wx.createSelectorQuery();

query.select('.container').boundingClientRect(function(rect) {

console.log("Container height:", rect.height);

that.setData({

windowHeight: rect.height

});

}).exec();

}

});

```

使用 `wx.getSystemInfoSync`

同步获取系统信息,返回一个对象,包含屏幕宽度和高度信息。

示例代码:

```javascript

const systemInfo = wx.getSystemInfoSync();

console.log("Screen height:", systemInfo.windowHeight);

```

建议

选择合适的方法:根据具体需求选择合适的方法获取屏幕高度,`wx.getSystemInfo` 和 `wx.createSelectorQuery` 都可以实现,但 `wx.getSystemInfo` 是异步的,适合在页面加载时获取信息;`wx.createSelectorQuery` 可以在页面元素加载完成后获取具体元素的高度。

考虑性能:频繁调用 `wx.getSystemInfo` 或 `wx.createSelectorQuery` 可能会影响性能,建议在必要时才进行获取。

通过以上方法,可以轻松获取微信小程序的屏幕高度,并根据需要进行处理和显示。