JavaScript原生网易云

最新推荐文章于 2024-04-04 00:18:42 发布

远方♡的诗意

最新推荐文章于 2024-04-04 00:18:42 发布

阅读量384

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_50706647/article/details/126003216

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<!-- href="javascript:;"表示重新读取js

data-type定义数据的标签属性，在js中通过dataset来获取-->

</li>

</ul>

</div>

<ul>

<li>

<a href="javascript:;" data-type="1" data-area="7">华语男歌手</a>

</li>

<li>

<a href="javascript:;" data-type="2" data-area="7">华语女歌手</a>

</li>

<li>

</li>

</ul>

</div>

<ul>

<li>

<a href="javascript:;" data-type="1" data-area="96">欧美男歌手</a>

</li>

<li>

<a href="javascript:;" data-type="2" data-area="96">欧美女歌手</a>

</li>

<li>

</li>

</ul>

</div>

<ul>

<li>

<a href="javascript:;" data-type="1" data-area="16">亚洲男歌手</a>

</li>

<li>

<a href="javascript:;" data-type="2" data-area="16">亚洲女歌手</a>

</li>

<li>

</li>

</ul>

</div>

<ul>

<li>

<a href="javascript:;" data-type="1" data-area="0">其他男歌手</a>

</li>

<li>

<a href="javascript:;" data-type="2" data-area="0">其他女歌手</a>

</li>

<li>

</li>

</ul>

</div>

</div>

<ul>

</ul>

</div>

<li>

<a>

</a>

</li>

</ul>

</div>

</div>

</body>

function btn(){

window.location.href="./xq.html";

}

</script>

</html>

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 += `

<li>

</a>

</li>

}

// 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");

});

}

远方♡的诗意

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫