Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
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
2024-10-27 12:18:02 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
679e230a5da49619a1c55060861362e1aa232f6e
679e230a
1 parent
5f5f9e6d
音频播放时,点击内容项可以控制播放暂停
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
18 additions
and
3 deletions
src/components/audioList.vue
src/views/bieyuan/info.vue
src/components/audioList.vue
View file @
679e230
...
...
@@ -11,7 +11,7 @@
<div class="van-hairline--top" style="padding: 1rem;">
<div v-for="(item, index) in audio_list" :key="index" class="van-hairline--bottom audio-item">
<div :class="['point', audio_index === index ? 'checked' : '']"></div>
<div :class="['text', audio_index === index ? 'checked' : '', 'van-ellipsis']" @click="
handleAudioPlay
(item, index)">
<div :class="['text', audio_index === index ? 'checked' : '', 'van-ellipsis']" @click="
toggleHandleAudio
(item, index)">
{{ index + 1 }}. {{ item.title }}<span v-if="item.play" class="text-center">正在播放</span>
</div>
...
...
@@ -169,6 +169,14 @@ const pauseProgress = () => {
clearInterval(intervalId);
}
const toggleHandleAudio = (item, index) => { // 切换播放或者暂停操作
if (item.play) {
handleAudioPause(item, index);
} else {
handleAudioPlay(item, index);
}
}
/**
* 暂停播放回调
* @param item
...
...
src/views/bieyuan/info.vue
View file @
679e230
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-2
3 09:18:49
* @LastEditTime: 2024-10-2
7 12:16:50
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
...
...
@@ -53,7 +53,7 @@
<div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div>
</div>
<div v-if="page_details.experience_audio.length" class="audio-wrapper">
<div @click="
play
Audio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
<div @click="
toggleHandle
Audio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
<div>{{ item.description }}</div>
<van-icon @click.stop="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
<van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
...
...
@@ -148,6 +148,13 @@ const play_audio_index = ref(null);
// src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
// play: false,
// }])
const toggleHandleAudio = (item, index) => { // 切换播放或者暂停操作
if (item.play) {
stopAudio(item, index);
} else {
playAudio(item, index);
}
}
const playAudio = (item, index) => {
page_details.value.experience_audio.forEach(item => item.play = false);
...
...
Please
register
or
login
to post a comment