鸿蒙应用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>

完整代码地址:

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

标签
已于2021-4-30 17:30:32修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐