日期: 2021 年 6 月 26 日

Qussar QScrollArea动态适配View高度

我们在使用Qussar QScrollArea等控件的时候，很多情况下，必须给出一个固定的高度，否则控件的高度会变成 0，导致无法显示出来。如何动态适配View高度呢？ 参考如下：

<template>
  <q-page>
    . . .
    <q-scroll-area>
      <q-resize-obeserver @resize="updateHeights" />
    <q-scroll-area>
  </q-page>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      //重新计算整个区域的高度，使得滚动区域占满整个父控件的高度
      const sz = this.measureElWrapSize(this.$el);
      this.$el.style.height = sz.height + 'px';
    },
    /**
     * 字符串对象是否不为空
     */
    isNotEmpty: function (s) {
        return (!this.isEmpty(s));
    },
    /**
     * 字符串对象是否为空
     */
    isEmpty: function (s) {
        return (this.isNull(s) || ('' === s));
    },
    /**
     * 对象是否为空
     */
    isNull: function (o) {
        return ((undefined === o) || (null === o));
    },
    /**
     * 对象是否不为空
     */
    isNotNull: function (o) {
        return (!this.isNull(o));
    },
    // 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高
    measureElWrapSize: function (el) {
        const hls = []; //到第一次出现高度限制的父窗口的数组
        const wls = []; //到第一次出现宽度限制的父窗口的数组

        // 向上搜索，直到父控件出现高度限制，否则继续向上搜索
        let p = el.offsetParent;
        let maxH = window.innerHeight;
        while (this.isNotNull(p)) {
            const h = p.style.height;
            if (this.isNotEmpty(h)) {
                maxH = Math.min(parseInt(h), maxH);
                break;
            }
            hls[hls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余高度
        let i = 0;
        for (; i < hls.length; i++) {
            const e = hls[i];
            maxH = maxH - e.offsetTop;
        }

        //需要计算自身的顶部偏移
        maxH = maxH - el.offsetTop;

        if (maxH < 0) {
            maxH = 0;
        }

        // 向上搜索，直到父控件出现宽度限制，否则继续向上搜索
        let maxW = window.innerWidth;
        p = el.offsetParent;
        while (this.isNotNull(p)) {
            const w = p.style.width;
            if (this.isNotEmpty(w)) {
                maxW = Math.min(parseInt(w), maxW);
                break;
            }
            wls[wls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余宽度
        i = 0;
        for (; i < wls.length; i++) {
            const e = wls[i];
            maxW = maxW - e.offsetLeft;
        }

        //需要计算自身的左侧偏移
        maxW = maxW - el.offsetLeft;
        
        if (maxW < 0) {
            maxW = 0;
        }

        return {width: maxW, height: maxH};
    },
  },
}

或者类似下面的情况：

<div id="q-app">
    <div class="q-pa-md">
        <q-layout class="shadow-2 rounded-borders" container ref="mainView"
                  view="hHh Lpr lff">
            . . . 
            <q-resize-obeserver @resize="updateHeights" />
        </q-layout>
    </div>
</div>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      const offset = this.$refs.mainView.$el.offsetTop;
      this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';
    }
  },
}

参考链接