【快应用】list案例分享
原创
©著作权归作者所有：来自51CTO博客作者华为开发者论坛的原创作品，请联系作者获取转载授权，否则将追究法律责任
背景描述：
快应用中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
