中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
js业务逻辑层:
import fetch from '@system.fetch'; //请求网络 export default { data: { path:"http://wangliao.free.idcfengye.com/audio/1.mp3", musicdatas:[], onedata:{}, mdatas:[{"one":"周杰伦","infos":["稻香","稻香","稻香"]}, {"one":"周杰伦","infos":["晴天","晴天","晴天","晴天"]}, {"one":"周杰伦","infos":["最长的电影","最长的电影","最长的电影","最长的电影"]} ] }, onInit(){ fetch.fetch({ url:'http://wangliao.free.idcfengye.com/text/music.json', responseType:"json", success:(resp)=>{ let jsonobj=JSON.parse(resp.data);//先将要取用的数据转换为json的格式 this.musicdatas=jsonobj.musicdatas; this.onedata=this.musicdatas[0]; } }) } }
视图层:
<div class="container"> <list class="listview"> <block for="{{mdatas}}"> <list-item-group class="list-item-group"> <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="bottommusic"> <text>{{onedata.name}}</text> <!-- <video controls="true" autoplay="true" src="{{path}}"> </video>--> </div> </div>
css属性设置:
.container { width: 100%; height: 1200px; display: flex; flex-direction: column; background-color: skyblue; } .listview{ width: 100%; height: 100%; } .list-item-group{ width: 100%; height: 20%; border: 1px solid red; } .list-item-group1{ width: 100%; height: 40%; border: 1px solid red; } .bottommusic{ width: 100%; height: 20%; position: fixed; bottom: 0px; left: 0px; background-color: darkorange; }
微信扫码分享
写得非常精彩,谢谢分享
写得非常精彩,谢谢分享