[文章]鸿蒙应用list-item-group分组开发练习

阅读量0
0
2
`
用来展示分组,宽度默认充满list组件,接下来通过一个案例来进行展示。
显示效果:
点击“打开第一组”
图片2.png
点击“打开全部”
图片3.png
点击“关闭全部”
图片4.png
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}}">
            <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.png

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友