uniapp中完美解决scroll-view的动态高度问题

废话不多说，直接上代码

<template>
  <view class="ceshi-con">
    <!-- 测试高度会不会影响固定滚动，可以删除 -->
    <!-- <view style="height: 30px;"> 测试高度 </view> -->
    <scroll-view id="ceshi" scroll-y="true" class="scroll-Y" :style="{ height: scrollHeight }">
      <view class="ceshi-txt" v-for="(item, index) in list" :key="index">{{ item.label }}</view>
    </scroll-view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        // 数据
        list: [],
        // 滚动容器高度
        scrollHeight: '90vh',
      }
    },
    onReady() {
      const that = this
      this.$nextTick(() => {
        uni.getSystemInfo({
          success: function (res) {
            const query = wx.createSelectorQuery()
            query.select('#ceshi').boundingClientRect()
            // 获取滚动容器css数据
            query.exec((resData) => {
              if (resData && resData.length) {
                // 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
                that.scrollHeight = res.windowHeight - resData[0].top + 'px'
              }
            })
          },
        })
      })
    },
    onLoad() {
      // 捏造数据
      for (let index = 0; index < 100; index++) {
        this.list.push({
          label: '测试' + index,
        })
      }
    },
  }
</script>
 
<style lang="scss" scoped>
  .ceshi-con {
    height: 100vh;
    overflow: hidden;
    #ceshi {
      height: 100%;
      .ceshi-txt {
        width: 100%;
        height: 100rpx;
      }
    }
  }
</style>