效果图:![鸿蒙js开发5 鸿蒙的分组列表组件<list-item-group>-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202101/27db32884b508400c2b420d7f9a08acc0ffecd.jpg)
页面视图及样式:
逻辑层数据定义:
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"]}]
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
最简单的代码实现功能,通俗易懂
通俗易懂 ,功能简约而不简单
我把代码原封不动复制到我的项目里,还单独开了一个页面展示这个,但是那个for那里就一直报错,循环展示使用for还需要引入什么吗?
我复制了,完美展示。第一次没显示,后来发现COPY JS文件时,应该放到EXPORT里。你看看是否别的地方有问题。