#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.

 

 

5.最终效果图

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

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2021-1-22 16:06:14修改
3
收藏 2
回复
举报
3
2


回复
    相关推荐
    恭喜您,今日已阅读两篇内容,特奖励+2声望, 快来领取吧。