七鸿蒙的分组列表 list-item-group

js业务逻辑层:

import fetch from '@system.fetch'; //请求网络
export default {
    data: {
        path:"http://wangliao.free.idcfengye.com/audio/1.mp3",
        musicdatas:[],
        onedata:{},
        mdatas:[{"one":"周杰伦","infos":["稻香","稻香","稻香"]},
                {"one":"周杰伦","infos":["晴天","晴天","晴天","晴天"]},
                {"one":"周杰伦","infos":["最长的电影","最长的电影","最长的电影","最长的电影"]}
               ]
    },
    onInit(){
  fetch.fetch({
      url:'http://wangliao.free.idcfengye.com/text/music.json',
      responseType:"json",
      success:(resp)=>{
               let jsonobj=JSON.parse(resp.data);//先将要取用的数据转换为json的格式
                this.musicdatas=jsonobj.musicdatas;
                this.onedata=this.musicdatas[0];
      }
  })
    }

}

视图层:

<div class="container">
    <list class="listview">
        <block for="{{mdatas}}">
        <list-item-group class="list-item-group">
            <list-item><text>{{$item.one}}</text> </list-item>
           <block for="{{(index,value) in $item.infos}}">
               <list-item>
                   <text>
                     第{{index+1}}首歌曲:{{value}}
                   </text>
               </list-item>
               
           </block>
        </list-item-group>
        </block>
    </list>
    <div class="bottommusic">
        <text>{{onedata.name}}</text>
       <!-- <video controls="true" autoplay="true" src="{{path}}">
        </video>-->
    </div>
</div>

css属性设置:

.container {
    width: 100%;
    height: 1200px;
    display: flex;
    flex-direction: column;
    background-color: skyblue;
}
.listview{
    width: 100%;
    height: 100%;
}
.list-item-group{
    width: 100%;
    height: 20%;
    border: 1px solid red;
}
.list-item-group1{
    width: 100%;
    height: 40%;
    border: 1px solid red;
}
.bottommusic{
    width: 100%;
    height: 20%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: darkorange;
}