uniapp获取当前页面的高度

uniapp yekong

在UniApp中获取当前页面的高度,可以通过调用uni.getSystemInfoSync()方法来实现。这个方法会返回一个包含多个系统信息的对象,其中windowHeight属性就是当前可使用窗口的高度.

以下是获取当前页面高度的代码示例:

onLoad() {
  // 获取当前窗口高度
  this.pageHeight = uni.getSystemInfoSync().windowHeight;
}

在上面的代码中,onLoad是页面加载完成后触发的生命周期函数,在这个函数中通过uni.getSystemInfoSync()方法同步获取系统信息,并从返回的对象中读取windowHeight属性,这个属性的值就是当前页面的高度.

此外,如果需要监听窗口大小的变化,并动态获取新的窗口高度,可以使用uni.onWindowResize()方法。这个方法会在窗口大小发生变化时触发,可以用来更新页面高度的数据.

onLoad() {
  // 获取当前窗口高度
  this.pageHeight = uni.getSystemInfoSync().windowHeight;
  
  // 监听窗口大小的变化
  uni.onWindowResize((res) => {
    this.pageHeight = res.windowHeight;
  });
}

在上面的代码中,uni.onWindowResize()方法用于监听窗口大小变化事件,每当窗口大小发生变化时,都会更新pageHeight变量的值为新的窗口高度.

综上所述,通过uni.getSystemInfoSync()方法可以获取当前页面的高度,而uni.onWindowResize()方法可以用来监听窗口大小的变化并获取新的页面高度。

喜欢