uniapp动态获取中间内容高度demo效果（整理）

<template>
  <view class="indexBox">
    <status-bar title="点餐" :showBack="true" :bgColorFff="false" class="home-data"></status-bar>
    <view class="bottomIos" style="background-color: grey;height: 100vh;">
      <view class="" style="height: 100rpx;background: darkred;">
        测试1111
      </view>
      <view class="" style="background-color: bisque;" :style="{ height: fillHeight + 'px' }">
        中间高度
      </view>
      <view class="bottomIosMargin" style="height: 100rpx;background: darkred;">
        测试测试333
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        description: '点餐主页',
        clientHeight: '',
        fillHeight: '',
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    //组件创建
    created() {
    },
    // 页面加载
    onLoad(e) {
      // 获取组件高度
      // let view = uni.createSelectorQuery().select(".home-data");
      // view.boundingClientRect(data=>{
      //  this.clientHeight =  data.height;
      // }).exec();
      let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
            2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          this.titleBarHeight = navHeight;
          this.statusBarHeight = res.statusBarHeight;
          console.log(this.titleBarHeight, this.statusBarHeight)
        },
        fail(err) {
          console.log(err);
        }
      })
      let view = uni.createSelectorQuery().select(".home-data");
      view.boundingClientRect(data => {
        this.clientHeight = data.height;
        console.log(this.clientHeight, '头部组件高度')
        uni.getSystemInfo({
          success: (res) => {
            const res1 = uni.getSystemInfoSync();
            const system = res1.osName;
            console.log(res1, 'systemsystem')
            if (system === 'ios') {
              this.fillHeight = res.windowHeight - this.getClientHeight() - 100 - this
                .clientHeight - 20;
            } else if (system === 'android') {
              this.fillHeight = res.windowHeight - this.getClientHeight() - 100 - this
                .clientHeight;
            }
            console.log(this.fillHeight, '高度')
          }
        });
      }).exec();
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      // 获取可视区域高度[兼容]
      getClientHeight() {
        const res = uni.getSystemInfoSync();
        const system = res.platform;
        if (system === 'ios') {
          return 0 + res.statusBarHeight;
        } else if (system === 'android') {
          return 0 + res.statusBarHeight;
        } else {
          return 0;
        }
      }
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
<style lang="scss" scoped>
  .indexBox {
    height: 100vh;
    // overflow: hidden;
    background-color: #FFFFFF;
  }
</style>
获取组件和可视屏幕区域高度：https://www.jianshu.com/p/1dbdc0d77ab0
uniapp小程序获取状态栏高度和自定义导航栏：http://events.jianshu.io/p/1eb20247ef22

<template>
  <view class="indexBox">
    <status-bar title="送券" :showBack="true" :bgColorFff="false" class="home-data"></status-bar>
    <view class="bottomIosMargin" style="background-color: #DF0629;height: 100vh;">
      <view class="mainBox" :style="{ height: fillHeight + 'px' }">
        中间高度
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        description: '送券列表-送券详情',
        clientHeight: '',
        fillHeight: '',
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    //组件创建
    created() {
    },
    // 页面加载
    onLoad(e) {
      // 获取组件高度
      // let view = uni.createSelectorQuery().select(".home-data");
      // view.boundingClientRect(data=>{
      //  this.clientHeight =  data.height;
      // }).exec();
      let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
            2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          this.titleBarHeight = navHeight;
          this.statusBarHeight = res.statusBarHeight;
          console.log(this.titleBarHeight, this.statusBarHeight)
        },
        fail(err) {
          console.log(err);
        }
      })
      let view = uni.createSelectorQuery().select(".home-data");
      view.boundingClientRect(data => {
        this.clientHeight = data.height;
        console.log(this.clientHeight, '头部组件高度')
        uni.getSystemInfo({
          success: (res) => {
            const res1 = uni.getSystemInfoSync();
            const system = res1.osName;
            console.log(res1, 'systemsystem')
            if (system === 'ios') {
              console.log('ios')
              this.fillHeight = res.windowHeight - this.getClientHeight() - this
                .clientHeight - 40;
            } else if (system === 'android') {
              console.log('android')
              this.fillHeight = res.windowHeight - this.getClientHeight() - this
                .clientHeight - 20;
            }
            console.log(this.fillHeight, '高度')
          }
        });
      }).exec();
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      // 获取可视区域高度[兼容]
      getClientHeight() {
        const res = uni.getSystemInfoSync();
        const system = res.platform;
        if (system === 'ios') {
          return 0 + res.statusBarHeight;
        } else if (system === 'android') {
          return 0 + res.statusBarHeight;
        } else {
          return 0;
        }
      }
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
<style lang="scss" scoped>
  .indexBox {
    height: 100vh;
    overflow: hidden;
    background-color: #FFFFFF;
    .mainBox {
      width: 690rpx;
      // height: calc(100vh - 40px);
      margin-left: 30rpx;
      margin-right: 30rpx;
      background-image: url('../static/img/bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
</style>