接着昨天轮播图的问题

看了之前的项目,没有出现横向轮播图。可能是我目前这个项目的页面安全宽度超过了本身轮播图可容纳宽度的极限。导致浏览器横向出现滚动条🥰

今天完成的效果图

在这里插入图片描述

今天主要是在细节方面进行修改,截图看不出来什么🤣·,如若要看效果,可以移步到✨这里

  • 主要美化代码

在这里插入图片描述
在这里插入图片描述

组件美化代码主要是 CSS 代码,这里就不都贴出来了。只是贴loading组件sessionHeader组件🥰

  • 对歌单播放数量进行格式化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//播放数量处理
_tranNumber(num, point) {
//去掉小数点
let numStr = num.toString().split(".")[0];
if (numStr.length < 6) {
//十万以内
return numStr;
} else if (numStr.length >= 6 && numStr.length <= 8) {
let decimal = numStr.substring(
numStr.length - 4,
numStr.length - 4 + point
);
return parseFloat(parseInt(num / 10000) + "." + decimal) + "万";
} else if (numStr.length > 8) {
let decimal = numStr.substring(
numStr.length - 8,
numStr.length - 8 + point
);
return parseFloat(parseInt(num / 10000000) + "." + decimal) + "亿";
}
},

完成的任务

  • 主要是对昨天的一些组件细节方面的调整,以及增加 Loading 组件 和 Baner 组件(独家放送组件)🥰

出现的问题

今天主要出现的问题是:✨数据请求和页面渲染出现速度不对等问题✨。主要地方是新碟首发组件以及歌手列表组件

在这里插入图片描述
在这里插入图片描述

解决方法:监听父组件传递过来的数据,接收到后,绑定相关样式,并且结合图片懒加载🥰。完美解决

在这里插入图片描述

总结

今天主要是只有一个下午的时间来写,所以没有接着开发🤣,更多的时间是在昨天的基础上对组件进行修改及完善🥰。今天主要精力在美观及页面渲染时是否对用户体验更加友好进行优化🥰。明天希望能把项目主页完成掉(还差 MV 组件底部组件)❤

PC端云音乐项目专栏