Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zacharyzlj
Yz Music
提交
7d2ff2b2
Y
Yz Music
项目概览
zacharyzlj
/
Yz Music
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Y
Yz Music
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
7d2ff2b2
编写于
2月 24, 2021
作者:
Z
Zachary
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: mvs page add infinite scrolling
上级
87cee60b
变更
3
展开全部
显示空白变更内容
内联
并排
Showing
3 changed file
with
67 addition
and
9231 deletion
+67
-9231
Plan.md
Plan.md
+37
-0
src/views/musicLibrary/MV.vue
src/views/musicLibrary/MV.vue
+30
-42
yarn.lock
yarn.lock
+0
-9189
未找到文件。
Plan.md
0 → 100644
浏览文件 @
7d2ff2b2
1.
首页
-
[x] 轮播图不完整
-
[x] 榜单超出字数隐藏
-
[x] 榜单正确名字显示
-
[x] 推荐歌单轮转
2.
搜索页
-
[x] 复制歌词
-
[x] 可以播放
-
[x] 可以转跳
-
搜索结果分页
3.
分类歌单
-
[x] 更多功能
-
[x] 分页功能
4.
评论
-
[x] 评论展示(分页效果)
-
可评论
-
可喜爱
-
可回复评论
5.
我的音乐
-
未登陆时登陆按钮
-
关注页面
-
粉丝页面
6.
排行榜页面
-
按钮功能
-
[x] 转跳
-
[x] 标题展示
7.
mv 列表页
-
[x] 无限滚动
8.
mv 详情播放页
9.
功能条
-
收藏
-
分享
-
添加
10.
[x] 懒加载
-
[ ] 样式调整
-
[ ] 组件抽离
src/views/musicLibrary/MV.vue
浏览文件 @
7d2ff2b2
...
...
@@ -36,8 +36,13 @@
>
</div>
</div>
<div
class=
"mod_mv"
>
<ul
class=
"mv_list__list"
id=
"mv_list"
>
<div
class=
"mod_mv"
id=
"mv_list_div"
ref=
"mvList"
style=
"max-height: 700px; overflow-y: scroll"
>
<ul
class=
"mv_list__list"
id=
"mv_list"
style=
"overflow: auto"
>
<li
class=
"mv_list__item"
v-for=
"item in mvs"
:key=
"item.id"
>
<div
class=
"mv_list__item_box"
style=
"visibility: visible"
>
<a
...
...
@@ -73,32 +78,13 @@
</div>
</li>
</ul>
</div>
</div>
</div>
<div
class=
"mod_slide_action"
>
<div
class=
"slide_action slide_action--left"
>
<a
class=
"slide_action__btn slide_action__btn--left js_jump"
data-p=
"prev"
tabindex=
"-1"
@
click=
"prevPage()"
<div
style=
"text-align: center; color: #999"
:style=
"
{ display: more ? 'none' : '' }"
>
<i
class=
"icon_txt"
>
上一页
</i
><i
class=
"slide_action__arrow slide_action__arrow--left sprite"
></i>
</a>
<span>
我也是有底线的~
</span>
</div>
</div>
<div
class=
"slide_action slide_action--right"
>
<a
class=
"slide_action__btn slide_action__btn--right js_jump"
data-p=
"next"
tabindex=
"-1"
@
click=
"nextPage()"
>
<i
class=
"icon_txt"
>
下一页
</i
><i
class=
"slide_action__arrow slide_action__arrow--right sprite"
></i>
</a>
</div>
</div>
</div>
...
...
@@ -129,6 +115,7 @@ export default {
},
mounted
()
{
this
.
updateMv
();
this
.
$refs
.
mvList
.
addEventListener
(
"
scroll
"
,
this
.
loadMore
);
},
methods
:
{
updateMv
()
{
...
...
@@ -140,40 +127,41 @@ export default {
this
.
selectType
)
.
then
((
res
)
=>
{
console
.
log
(
res
);
this
.
mvs
=
res
.
data
.
data
;
//
console.log(res);
this
.
mvs
.
push
(...
res
.
data
.
data
)
;
this
.
mvLoading
=
false
;
this
.
allLength
=
res
.
data
.
count
;
this
.
more
=
res
.
data
.
hasMore
;
})
.
catch
((
err
)
=>
console
.
log
(
err
));
},
areaSelect
(
id
)
{
this
.
selectArea
=
id
;
this
.
page
=
1
;
this
.
updateMv
();
},
typeSelect
(
id
)
{
this
.
selectType
=
id
;
this
.
page
=
1
;
this
.
updateMv
();
},
switchOrder
(
id
)
{
this
.
order
=
id
;
this
.
page
=
1
;
this
.
updateMv
();
},
nextPage
()
{
if
(
this
.
more
==
true
)
{
loadMore
()
{
const
scrollDom
=
document
.
getElementById
(
"
mv_list_div
"
);
if
(
scrollDom
.
clientHeight
+
parseInt
(
scrollDom
.
scrollTop
)
===
scrollDom
.
scrollHeight
)
{
if
(
this
.
more
)
{
this
.
page
++
;
this
.
updateMv
();
}
},
prevPage
()
{
if
(
this
.
page
>
1
)
{
this
.
page
--
;
this
.
updateMv
();
}
},
currentChange
(
v
)
{
this
.
page
=
v
;
},
processCount
,
},
components
:
{
...
...
yarn.lock
已删除
100644 → 0
浏览文件 @
87cee60b
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录