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

lsfzzf
发布于 2021-1-24 21:15
浏览
0收藏

效果图:

 

页面视图及样式:

<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"]}]

    }

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2021-1-27 15:42:32修改
4
收藏
回复
举报
4条回复
按时间正序
/
按时间倒序
Whyalone
Whyalone

最简单的代码实现功能,通俗易懂 

回复
2021-1-26 11:40:31
六合李欣
六合李欣

通俗易懂 ,功能简约而不简单

回复
2021-1-27 20:29:13
wx5fc1f00e14985
wx5fc1f00e14985

我把代码原封不动复制到我的项目里,还单独开了一个页面展示这个,但是那个for那里就一直报错,循环展示使用for还需要引入什么吗?

回复
2021-5-20 18:59:24
Easycloud
Easycloud 回复了 wx5fc1f00e14985
我把代码原封不动复制到我的项目里,还单独开了一个页面展示这个,但是那个for那里就一直报错,循环展示使用for还需要引入什么吗?

我复制了,完美展示。第一次没显示,后来发现COPY JS文件时,应该放到EXPORT里。你看看是否别的地方有问题。

回复
2021-9-22 11:43:57
回复
    相关推荐