效果图如下:
1、布局部分
(1)、template部分
<div class="detail">
<div class="song-title">
<p ref="song">{{song}}</p>
<p ref="singer">{{singer}}</p>
</div>
<div class="wrapper">
<ul class="content">
<li v-for="(item,index) of ms" :key=item.index>{{item.c}}</li>
</ul>
</div>
</div>
其中,song与singer采用eventBus全局数据传输获取,可参考vue使用eventBus实现数据传输
另外,歌词溢出部分可采用better-scroll来进行拉动查看,可参考vue.js使用better-scroll实现滚动
(2)、style部分
.detail
position absolute
top 1rem
bottom 2.6rem
left 0
right 0
text-align center
color #26a2ff
.song-title
width 100%
height 2rem
// background-color #eeefff
p
width 100%
line-height .8rem
font-size 18px
color #FFD700
margin-top .1rem
text-align center
// background-color #fff
.wrapper
overflow hidden
position absolute
top 2rem
right 0
left 0
height 545px
// background-color yellow
ul
line-height 32px
width 100%
padding-bottom 1rem
// background-color red
li
font-size 16px
transition-duration 1200ms
// background-color skyblue
2、lrc歌词文件解析逻辑部分
data () {
return {
Lrc:'',
ms: [],
song:'',
singer: '',
}
},
//this.Lrc是后端获取到的lrc格式的歌词文件
if(this.Lrc.length==0) return;
// var lyricstxt = []; //存放歌词
var lrcs = this.Lrc.split('\n');//用回车拆分成数组
// console.log(lrcs)
for(var i in lrcs) {//遍历歌词数组
lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
var s = t.split(":");//分离:前后文字
if(!isNaN(parseInt(s[0]))) { //是数值
var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段,可能有多个
var start = 0;
for(var k in arr){
start += arr[k].length; //计算歌词位置
}
var content = lrcs[i].substring(start);//获取歌词内容
for (var k in arr){
var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容
var s = t.split(":");//分离:前后文字
this.ms.push({//对象{t:时间,c:歌词}加入ms数组
t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),
c: content
});
}
}
}