鸿蒙js开发5 鸿蒙的分组列表组件<list-item-group> 原创

效果图：

页面视图及样式：

<div class="container">
    <list class="listdiv">
        <block for="{{musicDatas}}">
            <list-item-group class="list-item-group">
                <list-item><text class="t1">{{$item.leixing}}</text></list-item>
                <list-item><text>{{$item.music}}</text></list-item>
            </list-item-group>
        </block>
    </list>
</div>

.container {
    width: 100%;
    height: 1200px;
}
.listdiv{
    width: 100%;
    height: 100%;
}
.list-item-group{
    width: 100%;
/* 此处可通过不定义此模块高度来实现页面中<list-item-group>展开时高度自适应内容数量*/
/*    height: 20%;*/
    background-color: snow;
    border-bottom: 1px solid black;
}
.t1{
    font-weight: 300;
    color: green;
}

逻辑层数据定义：

data: {
        musicDatas:[{leixing:"华语音乐",music:["华语歌曲1","华语歌曲2","华语歌曲3"]},
                    {leixing:"欧美音乐",music:["欧美歌曲1","欧美歌曲2","欧美歌曲3","欧美歌曲4","欧美歌曲5"]},
                    {leixing:"小语种音乐",music:["小语种歌曲1","小语种歌曲2","小语种歌曲3","小语种歌曲4",
                                            "小语种歌曲5","小语种歌曲6","小语种歌曲7"]},
                    {leixing:"流行音乐",music:["流行歌曲1","流行歌曲2","流行歌曲3","流行歌曲4",
                                            "流行歌曲5","流行歌曲6","流行歌曲7"]},
                    {leixing:"民谣",music:["民谣歌曲1","民谣歌曲2","民谣歌曲3","民谣歌曲4",
                                            "民谣歌曲5","民谣歌曲6","民谣歌曲7"]},
                    {leixing:"轻音乐",music:["轻音乐歌曲1","轻音乐歌曲2","轻音乐歌曲3","轻音乐歌曲4",
                                            "轻音乐歌曲5","轻音乐歌曲6","轻音乐歌曲7"]},
                    {leixing:"摇滚",music:["摇滚歌曲1","摇滚歌曲2","摇滚歌曲3","摇滚歌曲4",
                                            "摇滚歌曲5","摇滚歌曲6","摇滚歌曲7"]}]

    }