第一周、1.List组件-CSDN博客

本文链接：https://blog.csdn.net/cxy2002cxy/article/details/124558244

本文详细介绍了如何使用List组件来展示列表数据，包括设置滚动条、添加侧边索引栏以及实现列表的折叠和展开功能。通过示例代码展示了如何在HTML中创建List组件，以及对应的CSS样式和JavaScript事件处理，帮助开发者打造更加交互友好的数据展示界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

List是用来显示列表的容器组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。

创建List组件：

<!-- index.hml -->
<div class="container">
    <list>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
    </list>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.listItem{
    height: 20%;
    background-color:#d2e0e0;
    margin-top: 20px;
}

<list-item-group>是<list>的子组件，实现列表分组功能，不能再嵌套<list>，可以嵌套<list-item>。
<list-item>是<list>的子组件，展示列表的具体项。

添加滚动条：

设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。

<!-- index.hml -->
<div class="container">
    <list class="listCss" scrollbar="on" >
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
    </list>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.listItem{
    height: 20%;
    background-color:#d2e0e0;
    margin-top: 20px;
}

.listCss{
    height: 100%;
    scrollbar-color: #8e8b8b;
    scrollbar-width: 20px;
}

添加侧边索引栏：

设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。section="#"可定义list组件的子组件为#在索引栏点击#即可显示该子组件。

<!-- index.hml -->
<div class="container">
        <list class="listCss" scrollbar="on" class="list" indexer="true">
            <list-item class="listItem" section="#"></list-item>
            <list-item class="listItem" section="A"> </list-item>
            <list-item class="listItem" section="B"></list-item>
            <list-item class="listItem" section="B"></list-item>
            <list-item class="listItem" section="C"></list-item>
            <list-item class="listItem" section="D"></list-item>
        </list>
</div>

实现列表折叠和展开

为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。

<!-- index.hml -->
<div class="doc-page">
  <list style="width: 100%;" id="mylist">
    <list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
      <list-item type="item" style="background-color:#FFF0F5;height:95px;">
        <div class="item-group-child">
          <text>One---{{listgroup.value}}</text>
        </div>
      </list-item>
      <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
        <div class="item-group-child">
          <text>Primary---{{listgroup.value}}</text>
        </div>
      </list-item>
    </list-item-group>
  </list>
</div>

// xxx.js
import prompt from '@system.prompt';
export default {
    data: {
        direction: 'column',
        list: []
    },
    onInit() {
        this.list = []
        this.listAdd = []
        for (var i = 1; i <= 2; i++) {
            var dataItem = {
                value: 'GROUP' + i,
            };
            this.list.push(dataItem);
        }
    },
    collapse(e) {
        prompt.showToast({
            message: 'Close ' + e.groupid
        })
    },
    expand(e) {
        prompt.showToast({
            message: 'Open ' + e.groupid
        })
    }
}

/* index.css */
.doc-page {
    flex-direction: column;
    background-color: #F1F3F5;
}
list-item{
    margin-top:30px;
}
.top-list-item {
    width:100%;
    background-color:#D4F2E7;
}
.item-group-child {
    justify-content: center;
    align-items: center;
    width:100%;
}