【关键词】
list组件 if/show
【问题背景】
list组件中给list-item使用show属性后，再设置为false后，会有一个空白位置留出，感觉位置好像还是被占据着，这种情形我们该如何处理？
如下图所示：
【问题原因】
引擎list组件的实现就是这样的，show为false时只是将控件设置为隐藏，dom树中并未删除，所以在list-item中仍会留着所占有的空间。建议使用if来进行规避。
解决方案
将原来的show改为if。
<list-item type="listItem" class="item" if="{{display}}">
<text class="txt">first listItem</text>
</list-item>
截图：
完整ux代码：
<template>
<div class="container">
<list class="list" id="list">
<list-item type="listItem" class="item" if="{{display}}">
<text class="txt">first listItem</text>
</list-item>
<list-item type="listItem" class="item item-color" for="{{listAdd}}">
<text class="txt">{{ $item }}--{{ $idx }}</text>
</list-item>
</list>
</div>
</template>
<script>
module.exports = {
data: {
loadMore: true,
listAdd: ['A', 'B', 'C'],
scrollPage: false,
display: false,
},
onInit() {
this.$page.setTitleBar({ text: '' })
}
}
</script>
<style>
.list {
height: 1000px;
padding-left: 60px;
padding-right: 60px;
border-color: #ff0000;
border-width: 5px;
}
.container {
flex: 1;
flex-direction: column;
}
.item {
height: 150px;
align-items: flex-start;
margin-bottom: 15px;
border-color: #9400d3;
border-width: 5px;
margin-right: 20px;
}
.item-color {
background-color: #f76160;
}
</style> 欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh