推荐
-
入驻歌手
华语
-
华语男歌手
-
华语女歌手
-
华语组合/乐队
欧美
-
欧美男歌手
-
欧美女歌手
-
欧美组合/乐队
亚洲
-
亚洲男歌手
-
亚洲女歌手
-
亚洲组合/乐队
其他
-
其他男歌手
-
其他女歌手
-
其他组合/乐队
入驻歌手
更多>
- 热门
- A
- B
- C
- D
- E
- F
- G
- H
- I
- G
- K
- L
- M
- N
- O
- P
- Q
- R
- S
- T
- U
- V
- W
- X
- Y
- Z
-
薛之谦
正在加载...
js逻辑
var type = document.querySelector('#type');
var artists = document.querySelector('#artists');
var lis = document.querySelectorAll('.left li');
var letters = document.querySelectorAll('.letters li');
var loading = document.querySelector('.loading');
// 标记变量，记录每次切换时候的数据
var starType = -1; //标记明星分类
var starArea = -1; //标记明星地区
var title = "入驻歌手"; //歌手的标题
var lettr = "-1"; //快速检索
var page = 0; //分页
var result = ""; //服务器端结果
// 每一次点击切换其实只是切换的一部分数据，所以封装一个函数
// 实际的函数参数类型与值还是要以接口文档上面要求的为主
function getArtists(type, area, initial, offset, callback) {
console.log(type, area, initial, offset);
// 发送ajax请求了
// 先让loading显示
loading.classList.add('show');
// 查询地址
var url = `https://autumnfish.cn/artist/list?type=${type}&area=${area}&initial=${initial}&limit=30&offset=${offset*30}`;
var xhr = new XMLHttpRequest();
xhr.open("get", url);
// 可以根据实际的点击获取不同的数据
// 这里面的值将来掉方法的时候是根据a标签传递过来的数据切换的
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 回传参数 因为callback当时接收的是一个函数体
// 在这里就相当于调用
callback(xhr.responseText);
loading.classList.remove('show');
}
}
}
// 调用获取数据的方法
getArtists(starType, starArea, lettr, page, function(res) {
// 使用json解析，解析数据，渲染视图
var data = JSON.parse(res);
console.log(data);
showInfo(title, data);
});
// 渲染视图的方法
function showInfo(title, stars, more) {
type.textContent = title;
var html = ``;
for (let i = 0; i < stars.artists.length; i++) {
// 取出来每一个歌手的信息
const star = stars.artists[i];
// console.log(star.img1v1Url);
// a标签就是通向歌手详情页的标签，需要携带数据
html += `
${star.name}
`
}
// more用来判断是否是触底加载更多
if (more) {
//加载更多
artists.innerHTML = artists.innerHTML + html;
} else {
artists.innerHTML = html;
}
// 懒加载图片
lazyload(document.querySelectorAll('.branwdo'));
}
// 点击类别切换数据
for (let i = 0; i < lis.length; i++) {
const li = lis[i];
// 绑定点击
li.addEventListener('click', function(e) {
console.log(this);
// 用户在选择歌手分类的时候有可能操作了热门这块的a-z,要切换成热门
lettr = -1;
letters.forEach(function(v, i) {
if (i === 0) {
v.classList.add('active');
} else {
v.classList.remove('active');
}
});
// 还要恢复第一页的数据
page = 0;
// 先清楚所有的li上的类型
lis.forEach(function(v) {
v.classList.remove('active');
})
// 点击的这个添加上去active
this.classList.add('active');
// 拿数据，再次发送请求进行数据更新
var a = this.children[0];
starType = a.dataset.type;
starArea = a.dataset.area;
title = a.textContent.trim();
console.log(starType, starArea);
// 重新获取数据，并渲染视图
getArtists(starType, starArea, lettr, page, function(res) {
var data = JSON.parse(res);
// console.log(data);
showInfo(title, data);
});
});
}
// 根据首字母排序的
letters.forEach(function(le) {
le.onclick = function() {
// 更改样式
letters.forEach(function(v) {
v.classList.remove('active');
})
le.classList.add('active');
// 传递a-z
lettr = le.children[0].dataset.letter;
// 重新获取数据，并渲染视图
getArtists(starType, starArea, lettr, page, function(res) {
var data = JSON.parse(res);
// console.log(data);
showInfo(title, data);
});
}
});
// 下拉加载更多,更多,歌手详情
window.onscroll = function() {
// 浏览器视口的高度
var clientHeight = document.documentElement.clientHeight;
// 滚动条在y轴上的滚动距离
var scrollTop = document.documentElement.scrollTop;
// 文档的总高度
var scrollHeight = document.documentElement.scrollHeight;
if (clientHeight + scrollTop >= scrollHeight) {
//重新加载数据
page += 1;
getArtists(starType, starArea, lettr, page, function(res) {
var data = JSON.parse(res);
// console.log(data);
showInfo(title, data, "1");
});
}
}
