回复
#2020征文-手机#鸿蒙js开发6:列表分组和音频播放组件的整合 原创
六合李欣
发布于 2021-1-22 11:51
浏览
2收藏
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.最终效果图
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2021-1-22 16:06:14修改
赞
3
收藏 2
回复
相关推荐