Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-04-07 18:01:49 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
94ade06ef3e3fa14a8504eb9368ee1fbc09d5c42
94ade06e
1 parent
a2e2d78e
refactor(AudioPlayer): 调整播放列表弹出层样式和行为
将播放列表弹出层的样式和行为进行优化,包括调整高度、添加遮罩层以及在选择歌曲后自动关闭播放列表
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
8 additions
and
6 deletions
src/components/ui/AudioPlayer.vue
src/views/profile/settings/AudioPlayerPage.vue
src/components/ui/AudioPlayer.vue
View file @
94ade06
<!--
* @Date: 2025-04-07 12:35:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 17:
20:5
4
* @LastEditTime: 2025-04-07 17:
37:3
4
* @FilePath: /mlaj/src/components/ui/audioPlayer.vue
* @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
-->
...
...
@@ -81,12 +81,13 @@
<!-- 播放列表弹出层 -->
<van-popup
teleport="body"
v-model:show="isPlaylistVisible"
position="bottom"
:overlay="
fals
e"
:overlay="
tru
e"
round
class="playlist-popup"
style="height:
100%
"
style="height:
70vh
"
>
<div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
<h4 class="font-medium">播放列表 ({{ songs.length }})</h4>
...
...
@@ -158,7 +159,6 @@ onMounted(() => {
const loadAudio = async () => {
if (!currentSong.value) return
isLoading.value = true
isPlaylistVisible.value = false // 关闭播放列表
try {
if (audio.value) {
audio.value.removeEventListener('timeupdate', updateProgress)
...
...
@@ -306,6 +306,8 @@ const selectSong = async (index) => {
if (audio.value) {
await audio.value.play()
isPlaying.value = true
// 关闭播放列表
isPlaylistVisible.value = false
// 滚动到当前播放的音频
const playlistItems = document.querySelector('.playlist-items')
const activeItem = playlistItems?.querySelector('.active')
...
...
src/views/profile/settings/AudioPlayerPage.vue
View file @
94ade06
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 17:
17:5
2
* @LastEditTime: 2025-04-07 17:
58:0
2
* @FilePath: /mlaj/src/views/profile/settings/AudioPlayerPage.vue
* @Description: 音频播放页面
-->
...
...
@@ -37,7 +37,7 @@ const audioList = ref([
title: '示例音频 2',
artist: '演唱者 2',
cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
url: 'https://img.tukuppt.com/newpreview_music/0
9/03/72/5c8ad96fbf47328809
.mp3'
url: 'https://img.tukuppt.com/newpreview_music/0
8/99/00/5c88d4a8d1f5745026
.mp3'
},
{
id: 3,
...
...
Please
register
or
login
to post a comment