【快应用】list案例分享

​ 

背景描述：

快应用中list组件中两个子组件，如何在一个list子组件高度固定的情形下，让另一个子组件可以铺满list组件剩余的高度？

 

解决方案：

可以通过getBoundingClientRect方法分别获取到list和第一个子组件的高度，然后相减得到剩余的高度，再设置给第二个子组件，这样即可将list组件剩余的高度都铺满。

 

示例代码：

<template>

  <!-- Only one root node is allowed in template. -->

  <div class="container">

    <list id="main" class="list">

      <list-item id="item" class="listitem" type="text">

        <text class="title">first listitem content</text>

      </list-item>

      <list-item type="list-item" style="height: {{seconditemheight}}px;background-color:green">

        <text class="title">second listitem content</text>

      </list-item>

    </list>

    <text class="title" onclick="custom">set height</text>

  </div>

</template>

 

<style>

  .container {

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .list {

    height: 80%;

    border: 1px solid #000000;

  }

  .title {

    font-size: 50px;

  }

  .listitem {

    height: 200px;

    background-color: #00ced1;

  }

</style>

 

<script>

  module.exports = {

    data: {

      componentData: {},

      seconditemheight: 0,

      listheight: 0,

      firstitemheight: 0,

    },

    onInit() {

      this.$page.setTitleBar({

        text: 'menu',

        textColor: '#ffffff',

        backgroundColor: '#007DFF',

        backgroundOpacity: 0.5,

        menu: true

      });

    },

    custom() {

      var that = this

      that.$element('main').getBoundingClientRect({

        success: function (data) {

          that.listheight = data.height;

        },

      });

      that.$element('item').getBoundingClientRect({

        success: function (data) {

          that.firstitemheight = data.height;

        },

      });

      setTimeout(() => {

        that.seconditemheight = that.listheight - that.firstitemheight

        console.log("this.seconditemheight ", that.seconditemheight)

      }, 50);

 

    }

  }

</script> 

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh