uniapp view计算剩余高度

在Uniapp中，可以通过以下方式计算View组件剩余的可用高度：

1. 首先，获取当前页面的高度和它包含的所有组件的高度。

// 获取窗口高度
let winHeight = uni.getSystemInfoSync().windowHeight;
// 获取当前页面的高度
uni.createSelectorQuery().in(this).select('.page').boundingClientRect((data) => {
  let pageHeight = data.height;
  // 获取所有组件的高度
  uni.createSelectorQuery().in(this).selectAll('.component').boundingClientRect((rects) => {
    let componentHeight = 0;
    rects.forEach((rect) => {
      componentHeight += rect.height;
    });
    // 计算剩余高度
    let remainingHeight = winHeight - pageHeight - componentHeight;
  }).exec();
}).exec();

2. 在页面加载完毕后，使用 `uni.createSelectorQuery()` 方法获取当前页面的高度和所有组件的高度。

<template>
  <view class="page">
    <view class="component">组件1</view>
    <view class="component">组件2</view>
    <view class="component">组件3</view>
  </view>
</template>

<script>
  export default {
    onReady() {
      // 获取窗口高度
      let winHeight = uni.getSystemInfoSync().windowHeight;
      // 获取当前页面的高度
      uni.createSelectorQuery().in(this).select('.page').boundingClientRect((data) => {
        let pageHeight = data.height;
        // 获取所有组件的高度
        uni.createSelectorQuery().in(this).selectAll('.component').boundingClientRect((rects) => {
          let componentHeight = 0;
          rects.forEach((rect) => {
            componentHeight += rect.height;
          });
          // 计算剩余高度
          let remainingHeight = winHeight - pageHeight - componentHeight;
          console.log('剩余高度：' + remainingHeight);
        }).exec();
      }).exec();
    }
  }
</script>