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

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

显示效果：

点击“打开第一组”

点击“打开全部”

点击“关闭全部”

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>

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/list-item-group