上篇详细描述了播放页歌词如何实现跟随跟单滚动，如何解析歌词，那么歌单页又是如何生成的呢，话不多说，直接上图上代码！

首先需要获取数据，具体获取数据api请转到我跟我大兄弟博客去观看学习去，同时也感谢我大兄弟无私跟我们共享接口！

www.bzqll.com  我大兄弟博客！

歌单列表生成

首先需要获取数据，然后生成列表！话不多说，直接上代码！

/* 默认首页是音乐音乐热歌榜，处理返回的json数据用了一点es6的语法 */

function indexSong() {

var count = 1;

loading("加载中...", 500);//悬浮弹框

$.ajax({

url: 'https:/xxxxxxxxxxxxx',

type: 'GET',

data: {

"key": "xxxxxxxx",

"id": "3778678",

"limit": "200",

"offset": "0"

},//具体url  跟key请访问我大兄弟博客获取，我的vip路径地址跟key没办法共享，请谅解

success: function(data) {

var NECsongs = data.data.songs; //是个数组对象，存放多个json数据

var length = NECsongs.length;

var html = `

`;

for(var vals of NECsongs) {　　//循环获取歌单，歌单歌词链接，歌单信息等

var ctime = krAudio.format(vals.time);

html += `

`;

count++;

}

if(localStorage.getItem("songsList") != null && localStorage.getItem("songsList") != "") {

html += localStorage.getItem("songsList");

}

listNow = html;//全局变量获取数据，存到本地

html += `

`;

//添加到列表中

mainList.html(html);//添加到播放列表

// 播放列表滚动到顶部

listToTop();

tzUtil.animates($("#tzloading"), "slideUp"); //加载动画消失

//刷新播放列表的总数

krAudio.allItem = mainList.children('.list-item').length - 1; //减去最后一个提示框

//更新列表小菜单

appendlistMenu();

//移动端列表点击播放

mainList.find(".list-item").click(mobileClickPlayMainList);

//移动端列表右边信息按钮的点击

$(".list-mobile-menu").click(mobileListMenu);

}

});

fineListBox();

};

列表点击播放

function mobileClickPlayMainList() {

if(isMobile) {

playlist = "mainLists";

search = false; //搜索标志结束

krAudio.Currentplay = $(this).index() -1; //当前播放的音乐序号

krAudio.seturl();

krAudio.play();

}

}