鸿蒙应用list-item-group分组开发练习

鸿蒙时代

发布于 2021-4-14 15:06

浏览

0收藏

用来展示分组，宽度默认充满list组件，接下来通过一个案例来进行展示。

显示效果：

鸿蒙应用list-item-group分组开发练习-鸿蒙开发者社区

点击“打开第一组”

鸿蒙应用list-item-group分组开发练习-鸿蒙开发者社区

点击“打开全部”

鸿蒙应用list-item-group分组开发练习-鸿蒙开发者社区

点击“关闭全部”

鸿蒙应用list-item-group分组开发练习-鸿蒙开发者社区

Hml文件中

<div class="doc-page">
    <list style="width: 100%;" id="mylist">
        <list-item class="top-list-item" clickeffect="false">
            <div class="item-div">
                <div class="item-child">
                    <button type="capsule" value="关闭第一组" onclick="collapseOne"></button>
                    <button type="capsule" value="打开第一组" onclick="expandOne"></button>
                </div>
                <div class="item-child">
                    <button type="capsule" value="关闭全部" onclick="collapseAll"></button>
                    <button type="capsule" value="打开全部" onclick="expandAll"></button>
                </div>
            </div>
        </list-item>
        <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>内容---{{listgroup.value}}</text>
                </div>
            </list-item>
            <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
                <div class="item-group-child">
                    <text>list-item---{{listgroup.value}}</text>
                </div>
            </list-item>
        </list-item-group>
    </list>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.