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

原创
2023/05/05 14:16
阅读数 75

【关键词】

list组件 if/show

 

【问题背景】

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

如下图所示:

cke_336.png

cke_790.png

 

【问题原因】

引擎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>

截图:

cke_3679.png

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部