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

六合李欣

发布于 2021-1-22 11:51

1.3w浏览

2收藏

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

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

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];
             }
         });
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.