🥰这三天完成的效果图

🌈三天的内容及遇到的问题

1、🔥完成滚动条触底,加载数据

  • 控制浏览器滚动条✨

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    window.addEventListener('scroll',() => {
    // 滚动视口高度(也就是当前元素的真实高度)
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 可见区域高度
    let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // 滚动条顶部到浏览器顶部高度
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if(clientHeight + Math.floor(scrollTop) == scrollHeight){
    this.getMvComment();
    }
    })
  • 控制指定滚动条✨

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <style>
    #container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: auto;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 300px;
    width: 1000px;
    }
    #foo {
    height: 1000px;
    width: 1000px;
    background-color: #777;
    display: block;
    }
    .test {
    width: 1000px;
    height: 1000px;
    }
    </style>
    <div id="container">
    <div id="foo">12334</div>
    </div>
    <div class="test"></div>
    <script>
    let container = document.getElementById("container");
    container.onscroll = function () {
    // 滚动视口高度(也就是当前元素的真实高度)
    let scrollHeight = container.scrollHeight || container.scrollHeight;
    // 可见区域高度
    let clientHeight = container.clientHeight;
    // 滚动条顶部到浏览器顶部高度
    let scrollTop = container.scrollTop;
    if(clientHeight + scrollTop == scrollHeight){
    console.log('滚动条触底了')
    }
    };
    </script>
  • 修改滚动条样式✨

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.el::-webkit-scrollbar {
width: 8px;
height: 8px;
}

.el::-webkit-scrollbar-track {
background-color: rgba(73, 177, 245, 0.2);
border-radius: 2em;
}

.el::-webkit-scrollbar-thumb {
background-color: #31c27c;
background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 2em;
}

.el::-webkit-scrollbar-corner {
background-color: transparent;
}

.el::-moz-selection {
color: #fff;
background-color: #31c27c;
}

这里需要注意的点是:✨添加了监听器,单离开页面是需要将定时器清除掉✨,不然会在其他页面造成不必要的影响。使用 beforeDestroy 生命周期函数清除定时器。

2、🔥解决在 App.vue 中无法动态获取 vuex 的数据

在 App.vue 给 vuex 添加一个监听器,即可实现动态监听💪🏻

1
2
3
4
5
6
watch: {
// 监听 vuex 中 loading 的变化, 使其能够动态赋值给 data 数据中
'$store.state.loading': function() {
this.isloading = this.$store.state.loading;
}
},

3、🔥跳转同一页面数据不更新渲染

之前也是遇到这问题,这个是 Vue 的特性,因为同一页面引用相同组件导致页面是不会刷新的

一开始为了避免出现这个问题,在跳转页面时,我就给路径添加了动态时间,使得路由发生变化进而导致页面刷新,但这个还是不行,也不知道怎么回事🤣。

最后,直接在 APP.vue 中添加了一个 :key值,然后就可以实现刷新了,但这样有一个不好的地方就是,没跳转一个页面都进行刷新。不是很好。🤣

1
<div id="app" :key="$route.fullPath"></div>

这里的原理是,✨通过路径的改变进而使 :key值发生改变,从而是页面重新渲染✨。(换句话说,在Vue中,页面是否渲染,取绝于:key值是否变化)

这里的话先这样解决,后期我在看看是什么问题。🤣

4、 🔥抽离组件

将之前组件抽离出MV组件歌单组件 正是这个骚操作,导致了下面一个问题出现🤣
增加了评论框组件登录组件

5、🔥无法监听父组件传递来的数据变化

MV组件歌单组件 中有一个播放量需要进行转换,为了方便,我直接在子组件这里使用 watch监听数据的变化后,在来处理,但实际上压根就没触发这个事件。

原因就是:✨vue为单向数据流,数据从父级组件传递给子组件,只能单向绑定,子组件内部不能直接修改从父级传递过来的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 子组件
let child = {
name: "child",
props: {
name: String,
age: Number,
},
template: `<span>名字:{{name}} 年龄:{{age}}</span>`,
watch: {
// 监听不到
name: function() {
console.log(this.age); // 没有输出
// 处理值
this.age = this.formData(this.age); // 没有修改
}
},
methods: {
formData(age) {
return name + "岁"
}
},
}
// 父组件
new Vue({
el: "#app",
data:{
obj: {
name:"小明",
age: 12,
}
},
components:{
// 子组件
child,
}
})

6、🔥部署 网易云API 到自己的服务器上

之前是部署在 vercel 的 https://cloud-music-api-sandy.vercel.app/ 现在是部署在自己的服务器上,使用 pm2 对程序进行管理

7、🔥Cannot read property ‘cancelToken‘ of undefined“

这个报错是我在对 axios 添加请求拦截器时,报的错误,主要讲 config 返回出去就不会报错了👍🏻

1
2
3
4
5
6
7
8
// 请求拦截器
axios.interceptors.request.use(function (config) {
store.dispatch("saveLoadingFlag", true);
// 必须返回 config 不然会报错
return config;
}, function (error) {
return Promise.reject(error);
})

🌈总结

这三天就完成了三个页面,而且布局都比较简单🤣。三个页面其中两个页面是在23号花了一个下午的时间完成的。这也取绝于前期我将组件重新在抽离了出三个公共组件MV卡片组件歌单卡片组件评论条组件。在加上之前将 axios 进行二次封装,速度也提高了很多。但目前看,还是有一些代码比较冗余,而且在该一些东西时,一改动一个小地方,接连要改很多地方。(比如:修改路由,修改方法名等)。后期的话,会针对这些不足进行改造。下周主要是攻克音乐模块的播放及进度条拖拽实现歌词联动等功能。💪🏻

PC端云音乐专栏