如何获取小程序页面高度

DY/KS免费对接

摘要：如何获取小程序页面高度？本文将从四个方面详细阐述：一、利用API获取页面高度；二、使用DOM节点计算页面高度；三、监听页面滚动事件获取高度；四、利用第三方插件获取高度。

图片：

一、API获取页面高度

利用API获取小程序页面高度是最简单、最直接的方式。小程序提供了wx.getSystemInfo()接口获取设备信息，页面的高度就包含在其中。可以通过以下代码获取页面高度：

wx.getSystemInfo({
  success: function(res) {
    console.log(res.windowHeight)
  }
})

返回结果为当前设备的可使用窗口高度，单位为px，包含底部菜单栏，但不包含导航栏。

除了getSystemInfo()，还可以使用wx.getSystemInfoSync()同步接口获取设备信息。

二、使用DOM节点计算页面高度

另一种方式是使用DOM节点计算页面高度。首先要获取页面节点（需要在页面onLoad()生命周期函数中调用），然后使用wx.createSelectorQuery()创建节点查询器，通过节点查询器获取页面高度。

Page({
  onLoad: function () {
    var that = this;
    wx.createSelectorQuery().select('.page').boundingClientRect(function (rect) {
      that.setData({
        windowHeight: rect.height
      })
    }).exec()
  }
})

boudingClientRect()获取节点位置信息，包括宽度和高度等，最后将高度信息保存在data属性中，供其他页面使用。

三、监听页面滚动事件获取高度

第三种方式是监听页面滚动事件获取高度。通过监听页面滚动事件，获取页面的当前滚动高度和页面总高度，两者相加即可得到页面的高度。

Page({
  data: {
    scrollHeight: 0,
    pageHeight: 0
  },
  onReady: function () {
    var that = this;
    wx.createSelectorQuery().select('.page').boundingClientRect(function (rect) {
      that.setData({
        pageHeight: rect.height
      })
    }).exec()
  },
  onPageScroll: function (e) {
    this.setData({
      scrollHeight: e.scrollTop + this.data.pageHeight
    })
  }
})

onReady()生命周期函数中获取页面高度，当监听页面滚动事件时，将当前滚动高度和页面总高度相加，即可获得页面高度。

四、利用第三方插件获取高度

除了以上几种方法，还可以使用第三方插件获取小程序页面高度。插件通过封装和优化的方式提高了计算和获取页面高度的效率，同时还提供了更丰富的功能，例如获取底部栏高度等。

常见的第三方插件包括wxsdk-tools和wx-regin等，使用时，只需在小程序中引入插件，并按照插件文档中的指导使用即可。

总之，以上方法均可用于获取小程序页面高度，开发者可以根据自己的需要选择合适的方式。