HarmonyOS 鸿蒙Next中【快应用】list-item组件的正确隐藏

HarmonyOS 鸿蒙Next中【快应用】list-item组件的正确隐藏 【关键词】

• list组件 if/show

【问题背景】

list组件中给list-item使用show属性后，再设置为false后，会有一个空白位置留出，感觉位置好像还是被占据着，这种情形我们该如何处理？

如下图所示：

【问题原因】

引擎list组件的实现就是这样的，show为false时只是将控件设置为隐藏，dom树中并未删除，所以在list-item中仍会留着所占有的空间。建议使用if来进行规避。

【解决方案】

将原来的show改为if。

截图：

完整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>