#2020征文-手机#鸿蒙js开发6：列表分组和音频播放组件的整合 原创

1.鸿蒙的List,list-item-group,list-item组件的综合布局视图，构建音乐列表项

2.js的业务模型和fetch远程请求nginx的数据，list-item-group,list-item是平级的，所以在数据构建上，做了改动，形成了一对多关系

import fetch from '@system.fetch';
export default {
    data: {
        onedata:{},
        musicdatas:[],
        title: 'World',
        musicone:"http://lixin.free.idcfengye.com/audio/a1.mp3",

        mdatas:[{"one":"菜单父项一","infos":["歌曲1","歌曲2","歌曲3"]},
                {"one":"菜单父项二","infos":["外国歌曲1","外国歌曲2","外国歌曲3","外国歌曲4"]},
                {"one":"菜单父项三","infos":["美声歌曲1","美声歌曲2","美声歌曲3","美声歌曲4",
                                        "美声歌曲5"]}]
    },

    onInit()
    {
        //鸿蒙从nginx服务器上获取数据的
         fetch.fetch({
             url:'http://lixin.free.idcfengye.com/text/music.json',
             responseType:"json",
             success:(resp)=>
             {
                 let  jsonObject=JSON.parse(resp.data);
                 this.musicdatas=jsonObject.musicdatas;
                 this.onedata=this.musicdatas[0];
             }
         });
    }
}

3.页面布局，第一个注释掉的，形成了兄弟关系，通过数据结构形成了父子关系

<div class="container">
   <list class="listview">
        <!--<block  for="{{musicdatas}}">
            <block  if="{{$idx%2==0}}">
                <list-item-group  class="groupone">
                <list-item><text>流行音乐一</text></list-item>
                <list-item>
                    <text>{{$item.name}}</text>
                </list-item>
                </list-item-group>
            </block>
             <block else>
                 <list-item-group  class="groupone">
                 <list-item><text>流行音乐二</text></list-item>
                 <list-item>
                     <text>{{$item.name}}</text>
                 </list-item>
                     </list-item-group>
             </block>
         </block>-->
         <block  for="{{mdatas}}">
                 <list-item-group  class="groupone">
                     <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="musicview">
        <text>{{onedata.name}}</text>

      <!-- <video  src="{{musicone}}"  controls="true" autoplay="true">
       
       </video>-->
    </div>
</div>

4.样式

.container {
    width: 100%;
    height: 1200px;
    background-color: powderblue;
}
.listview{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.groupone{
    width: 100%;
    height: 25%;
    border-bottom: 2px  solid  black;
}
.grouptwo{
    width: 100%;
    height: 20%;
    border-bottom: 2px  solid  black;
}
.musicview{
    width: 100%;
    height: 10%;
    border:2px  solid  black;
    position: fixed;
    left:0px;
    bottom: 0px;
    background-color: forestgreen;
}

5.最终效果图