中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
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.最终效果图
微信扫码分享