微信小程序如何用js得到高度

微信小程序通过JavaScript获取高度的常用方法有：使用节点选择器、获取系统信息、通过计算容器高度来实现。其中，使用节点选择器是最常用且最为直观的方法。通过节点选择器，开发者可以直接获取到指定元素的高度，从而进行后续的布局和样式调整。以下将详细介绍如何在微信小程序中通过JavaScript获取高度的方法。

一、使用节点选择器

1. 基本使用方法

微信小程序提供了wx.createSelectorQuery接口，可以通过该接口获取页面节点的信息。以下是一个简单的示例，展示如何获取一个元素的高度：

Page({
  onLoad() {
    const query = wx.createSelectorQuery()
    query.select('#myElement').boundingClientRect()
    query.exec(res => {
      console.log(res[0].height) // 打印出元素的高度
    })
  }
})

在上述代码中，我们首先使用wx.createSelectorQuery创建一个查询对象，然后使用query.select('#myElement')选择我们需要的元素。boundingClientRect()方法可以获取该元素的各种尺寸和位置信息，最后通过exec方法执行查询并获取结果。

2. 使用节点选择器获取多个元素高度

有时候，我们需要获取多个元素的高度，这时可以使用selectAll方法来选择多个元素，并通过boundingClientRect一次性获取多个元素的信息：

Page({
  onLoad() {
    const query = wx.createSelectorQuery()
    query.selectAll('.myElements').boundingClientRect()
    query.exec(res => {
      res.forEach(rect => {
        console.log(rect.height) // 打印出每个元素的高度
      })
    })
  }
})

通过这种方式，我们可以轻松获取页面中多个元素的高度信息。

二、获取系统信息

1. 获取窗口高度

除了使用节点选择器外，有时我们还需要获取整个窗口的高度，这样可以更好地进行页面布局。微信小程序提供了wx.getSystemInfo和wx.getSystemInfoSync两个接口来获取系统信息：

Page({
  onLoad() {
    wx.getSystemInfo({
      success(res) {
        console.log(res.windowHeight) // 打印出窗口高度
      }
    })
  }
})

wx.getSystemInfoSync是同步接口，可以在代码中直接获取系统信息：

Page({
  onLoad() {
    const res = wx.getSystemInfoSync()
    console.log(res.windowHeight) // 打印出窗口高度
  }
})

通过这些方法，我们可以获取到当前设备的屏幕高度、窗口高度等信息，从而进行更好的页面布局和适配。

三、通过计算容器高度

1. 动态计算高度

有时候，我们需要根据页面中某些元素的高度来动态计算容器的高度。例如，当一个列表项的高度变化时，需要重新计算整个列表的高度。以下是一个简单的示例，展示如何动态计算容器高度：

Page({
  data: {
    containerHeight: 0
  },
  onLoad() {
    const query = wx.createSelectorQuery()
    query.selectAll('.listItem').boundingClientRect()
    query.exec(res => {
      let totalHeight = 0
      res.forEach(rect => {
        totalHeight += rect.height
      })
      this.setData({
        containerHeight: totalHeight
      })
    })
  }
})

在上述代码中，我们首先获取所有列表项的高度，然后将它们相加，最后通过setData方法将计算出的总高度设置到数据中，从而实现动态计算容器高度的目的。

2. 实时更新高度

有时候，页面中的元素高度会因为用户操作或其他原因而发生变化，这时我们需要实时更新高度。可以使用observer或setInterval等方法来实现实时更新高度：

Page({
  data: {
    containerHeight: 0
  },
  onLoad() {
    this.updateContainerHeight()
    this.interval = setInterval(this.updateContainerHeight, 1000) // 每秒更新一次
  },
  onUnload() {
    clearInterval(this.interval) // 清除定时器
  },
  updateContainerHeight() {
    const query = wx.createSelectorQuery()
    query.selectAll('.listItem').boundingClientRect()
    query.exec(res => {
      let totalHeight = 0
      res.forEach(rect => {
        totalHeight += rect.height
      })
      this.setData({
        containerHeight: totalHeight
      })
    })
  }
})

通过这种方式，我们可以确保页面中的高度信息始终是最新的，从而保证页面布局的准确性。

四、特殊场景处理

1. 获取滚动区域高度

在某些场景下，我们需要获取页面中某个滚动区域的高度，例如，一个可滚动的列表或一个包含大量内容的容器。可以通过scroll-view组件的scroll事件来获取滚动区域的信息：

<scroll-view bindscroll="onScroll" style="height: 100px;">
  <view id="content">...</view>
</scroll-view>

Page({
  onScroll(e) {
    const query = wx.createSelectorQuery()
    query.select('#content').boundingClientRect()
    query.exec(res => {
      console.log(res[0].height) // 打印出滚动区域内容的高度
    })
  }
})

通过这种方式，我们可以在滚动事件中实时获取滚动区域的高度，从而进行更精细的页面布局和交互设计。

2. 获取图片加载后的高度

在微信小程序中，图片的高度通常是异步加载的，因此在页面初始渲染时无法直接获取图片的高度。可以通过监听图片的load事件来获取图片加载后的高度：

<image id="myImage" src="path/to/image.jpg" bindload="onImageLoad" />

Page({
  onImageLoad(e) {
    const query = wx.createSelectorQuery()
    query.select('#myImage').boundingClientRect()
    query.exec(res => {
      console.log(res[0].height) // 打印出图片的高度
    })
  }
})

通过这种方式，我们可以确保在图片加载完成后获取到准确的高度信息，从而进行更好的布局调整。

五、注意事项

1. 页面渲染完成后获取高度

在微信小程序中，页面的初始渲染和数据加载是异步的，因此在页面初次加载时直接获取元素高度可能会出现不准确的情况。建议在页面渲染完成后再进行高度获取，可以使用setTimeout或onReady方法来确保页面已经完全渲染：

Page({
  onReady() {
    setTimeout(() => {
      const query = wx.createSelectorQuery()
      query.select('#myElement').boundingClientRect()
      query.exec(res => {
        console.log(res[0].height) // 确保页面渲染完成后获取高度
      })
    }, 100)
  }
})

2. 动态内容更新后的高度获取

在处理动态内容时，例如通过用户交互添加或删除元素，建议在内容更新后重新获取高度。可以通过this.setData方法触发页面重新渲染，然后在setData的回调中获取最新的高度：

Page({
  data: {
    items: []
  },
  addItem() {
    this.setData({
      items: [...this.data.items, {}]
    }, () => {
      const query = wx.createSelectorQuery()
      query.selectAll('.listItem').boundingClientRect()
      query.exec(res => {
        let totalHeight = 0
        res.forEach(rect => {
          totalHeight += rect.height
        })
        console.log(totalHeight) // 获取更新后的高度
      })
    })
  }
})

通过这种方式，我们可以确保在动态内容更新后获取到最新的高度信息，从而进行更精确的页面布局和交互设计。

六、总结

获取微信小程序中元素的高度是一个常见且重要的需求，通过本文的介绍，我们了解了以下几种方法：

使用节点选择器：通过wx.createSelectorQuery接口，可以轻松获取页面中指定元素的高度，适用于大部分场景。
获取系统信息：通过wx.getSystemInfo和wx.getSystemInfoSync接口，可以获取窗口高度和其他系统信息，适用于页面整体布局。
通过计算容器高度：通过获取多个元素的高度并进行计算，可以实现动态的容器高度调整，适用于列表和动态内容的场景。
特殊场景处理：包括获取滚动区域高度、图片加载后的高度等，针对特定场景进行特殊处理，确保高度信息的准确性。

以上方法各有优缺点，开发者可以根据具体需求选择合适的方法进行高度获取和页面布局调整。在实际开发中，注意页面渲染完成后的高度获取，以及动态内容更新后的高度重新计算，确保页面布局的准确性和用户体验的提升。