鸿蒙应用list-item-group分组开发练习
头像 Tiechui.Wang 2021-04-15 10:16:00    发布
3758 浏览 10 点赞 16 收藏

用来展示分组,宽度默认充满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


©本站发布的所有内容,包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等,除特别标明外,均来源于网络或用户投稿,版权归原作者或原出处所有。我们致力于保护原作者版权,若涉及版权问题,请及时联系我们进行处理。
分类
其它
地址:北京市朝阳区北三环东路三元桥曙光西里甲1号第三置业A座1508室 商务内容合作QQ:2291221 电话:13391790444或(010)62178877
版权所有:电脑商情信息服务集团 北京赢邦策略咨询有限责任公司
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,我司致力于保护作者版权,如有侵权,请与我司联系删除
京ICP备:2022009079号-2
京公网安备:11010502051901号
ICP证:京B2-20230255