【快应用】list-item组件的正确隐藏

【关键词】

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