1054425342@qq.com
1 month ago
5 changed files with 0 additions and 1612 deletions
@ -1,155 +0,0 @@ |
|||
# AudioControl 音频控制组件使用文档 |
|||
|
|||
## 组件功能 |
|||
- 在父组件右上角显示音频控制图标 |
|||
- 点击图标播放指定音频，同时暂停背景音乐 |
|||
- 再次点击暂停音频，恢复背景音乐 |
|||
- 音频播放结束后自动恢复背景音乐 |
|||
|
|||
## 组件属性 (Props) |
|||
|
|||
| 属性名 | 类型 | 必填 | 默认值 | 说明 | |
|||
|--------|------|------|--------|------| |
|||
| audioSrc | String | 是 | - | 音频文件路径 | |
|||
| visible | Boolean | 否 | true | 是否显示组件 | |
|||
|
|||
## 使用方法 |
|||
|
|||
### 1. 在父组件中引入和注册组件 |
|||
|
|||
```vue |
|||
<template> |
|||
<view class="parent-container"> |
|||
<!-- 父组件内容 --> |
|||
<view class="content"> |
|||
<!-- 你的页面内容 --> |
|||
</view> |
|||
|
|||
<!-- 音频控制组件 --> |
|||
<AudioControl |
|||
:audioSrc="audioUrl" |
|||
:visible="showAudio" |
|||
/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import AudioControl from '@/components/AudioControl.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
AudioControl |
|||
}, |
|||
data() { |
|||
return { |
|||
audioUrl: 'https://your-domain.com/audio/sample.mp3', // 替换为你的音频URL |
|||
showAudio: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.parent-container { |
|||
position: relative; /* 重要：确保AudioControl能正确定位 */ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
|||
``` |
|||
|
|||
### 2. 使用项目中的showImg方法（推荐） |
|||
|
|||
如果你的音频文件也存储在项目服务器上，可以使用项目的showImg方法： |
|||
|
|||
```vue |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
audioUrl: this.showImg('/uploads/audio/your-audio-file.mp3'), |
|||
showAudio: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 3. 动态控制音频源 |
|||
|
|||
你可以根据不同的页面或条件播放不同的音频： |
|||
|
|||
```vue |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
audioUrl: '', |
|||
showAudio: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 根据页面设置不同的音频 |
|||
this.setAudioForCurrentPage(); |
|||
}, |
|||
methods: { |
|||
setAudioForCurrentPage() { |
|||
const currentRoute = this.$route.path; // 假设使用vue-router |
|||
|
|||
switch(currentRoute) { |
|||
case '/chapter1': |
|||
this.audioUrl = this.showImg('/uploads/audio/chapter1.mp3'); |
|||
break; |
|||
case '/chapter2': |
|||
this.audioUrl = this.showImg('/uploads/audio/chapter2.mp3'); |
|||
break; |
|||
default: |
|||
this.audioUrl = this.showImg('/uploads/audio/default.mp3'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
## 样式说明 |
|||
|
|||
组件默认定位在父组件的右上角（top: 30rpx, right: 30rpx），如果需要调整位置，可以在父组件中覆盖样式： |
|||
|
|||
```vue |
|||
<style> |
|||
/* 调整音频控制组件位置 */ |
|||
.parent-container ::v-deep .audio-control { |
|||
top: 50rpx !important; |
|||
right: 50rpx !important; |
|||
} |
|||
</style> |
|||
``` |
|||
|
|||
## 注意事项 |
|||
|
|||
1. **父组件样式**：确保父组件设置了 `position: relative`，这样AudioControl组件才能正确定位 |
|||
2. **音频格式**：建议使用 mp3 格式的音频文件，兼容性最好 |
|||
3. **音频路径**：确保音频文件路径正确且可访问 |
|||
4. **背景音乐**：组件会自动处理与MusicControl组件的交互，无需额外配置 |
|||
|
|||
## 图标说明 |
|||
|
|||
- 🔊：音频未播放状态 |
|||
- 🎧：音频播放中状态，带有脉动动画效果 |
|||
|
|||
## 事件处理 |
|||
|
|||
组件内部已处理所有音频播放逻辑，包括： |
|||
- 播放音频时自动暂停背景音乐 |
|||
- 暂停音频时自动恢复背景音乐 |
|||
- 音频播放结束时自动恢复背景音乐 |
|||
- 组件销毁时自动清理资源 |
|||
|
|||
## 示例场景 |
|||
|
|||
适用于以下场景： |
|||
- 章节页面播放对应的音频解说 |
|||
- 展示页面播放介绍音频 |
|||
- 互动页面播放提示音频 |
|||
- 任何需要临时播放音频并暂停背景音乐的场景 |
|||
@ -1,795 +0,0 @@ |
|||
<template> |
|||
<!-- 灵动岛占位区域 - 始终存在但控制可见性 --> |
|||
<view class="dynamic-island-placeholder" :class="{ visible: isScrolled }" |
|||
:style="{ height: 216 + 'rpx' }"> |
|||
<view class="dynamic-island" :class="{ |
|||
compact: actualCompactState, |
|||
fixed: isFixed, |
|||
}" :style="{ top: isFixed ? fixedTopPosition + 'px' : 0 }" @click="handleToggle"> |
|||
<!-- 展开状态 --> |
|||
<view v-if="!actualCompactState" class="expanded-content"> |
|||
<template> |
|||
<template v-if="styleType != 'timeShop'"> |
|||
<!-- 三栏布局 --> |
|||
<view class="three-column-layout"> |
|||
<!-- 右侧：头像和链接 --> |
|||
<view class="right-section"> |
|||
<view class="avatar-container" @click="toWebView"> |
|||
<image class="avatar" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
|||
mode="aspectFill"></image> |
|||
</view> |
|||
<view class="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;"> |
|||
<view class="profile-info"> |
|||
<text class="profile-title">数字领航员</text> |
|||
<text class="profile-name">EVITA</text> |
|||
</view> |
|||
<view class="platform-link"> |
|||
<view class="link-text" style="margin-bottom: 15rpx;">DES介绍 >> |
|||
</view> |
|||
<view class="link-text">DES广播 >></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 左侧分隔线 --> |
|||
<view class="column-divider"></view> |
|||
<!-- 左侧：欢迎信息 --> |
|||
<view class="left-section"> |
|||
<view class="welcome-message"> |
|||
<view class="welcome-text">Hi!{{ |
|||
userInfo && userInfo.token ? userInfo.nickname : "用户" |
|||
}}欢迎回来~</view> |
|||
</view> |
|||
<view class="" style="font-size: 24rpx;font-weight: bold;color: #000000;"> |
|||
查看您的DES数据资产行 |
|||
</view> |
|||
<view class="" style="display: flex;align-items: flex-end;justify-content: space-between;"> |
|||
<view class=""> |
|||
<view class="stats-info" @click="toOrder"> |
|||
<text class="stats-number">2</text> |
|||
<text class="stats-unit">个</text> |
|||
</view> |
|||
<view class="stats-label">数字权益行</view> |
|||
</view> |
|||
<div> |
|||
<view class="stats-info" @click="toOrder"> |
|||
<text class="stats-number">2</text> |
|||
<text class="stats-unit">个</text> |
|||
</view> |
|||
<view class="stats-label">数字资产行</view> |
|||
</div> |
|||
<view class="middle-section"> |
|||
<view class="time-reward-container"> |
|||
<text class="time-reward-title" style="margin-bottom: 5rpx;">时间奖励</text> |
|||
<view class="time-reward-stats"> |
|||
<text class="time-reward-number">120</text> |
|||
<text class="time-reward-unit">点</text> |
|||
</view> |
|||
<text class="time-reward-label" style="font-weight: bold;">旅行时间行</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
<template v-if="styleType == 'timeShop'"> |
|||
<view class="bottom-section"> |
|||
<view class="" style="flex:1;"> |
|||
<view class="" style="display: flex;"> |
|||
<view class="time-reward-container" style="width: 200rpx;"> |
|||
<text class="time-reward-title">时间奖励</text> |
|||
<view class="time-reward-stats"> |
|||
<text class="time-reward-number">120</text> |
|||
<text class="time-reward-unit">点</text> |
|||
</view> |
|||
<text class="time-reward-label" |
|||
style="font-size: 24rpx;font-weight: bold;">旅行时间行</text> |
|||
</view> |
|||
<view class=""> |
|||
<view class="time-reward-number" style="font-size: 34rpx;"> |
|||
{{ |
|||
userInfo && userInfo.token ? userInfo.nickname : "用户" |
|||
}} |
|||
</view> |
|||
<view class="time-reward-label" |
|||
style="margin-top: 15rpx;font-weight: bold;font-size: 26rpx;"> |
|||
积分:999<text |
|||
style="color: #999999;font-size: 22rpx;margin-left: 10rpx;">积分获取规则</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="" |
|||
style="display: flex;align-items: center;font-size: 26rpx;font-weight: bold;display: flex;align-items: center;margin-top: 20rpx;"> |
|||
<view class="" style="width: 200rpx;"> |
|||
时长:{{ |
|||
userInfo && userInfo.token ? userInfo.hour+'h' : "-" |
|||
}} |
|||
</view> |
|||
<view class=""> |
|||
<image style="width: 22rpx;height: 22rpx;margin-right: 15rpx;" |
|||
:src="showImg('/uploads/20250822/c8ee7615823a1ffaba400a4d5746de9a.png')"> |
|||
</image> |
|||
点赞:120 |
|||
</view> |
|||
<view class=""> |
|||
<image style="width: 22rpx;height: 22rpx;margin: 0 15rpx;" |
|||
:src="showImg('/uploads/20250822/84c49f78f1c86b7340aaaa391bd4b7cf.png')"> |
|||
</image> |
|||
留言:120 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image class="avatar" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
|||
mode="aspectFill"></image> |
|||
</view> |
|||
</template> |
|||
</template> |
|||
</view> |
|||
|
|||
<!-- 紧凑状态 --> |
|||
<view v-else class="compact-content"> |
|||
<text class="compact-name">{{ getCompactName() }}</text> |
|||
<image class="compact-avatar" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
|||
mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "DynamicIsland", |
|||
props: { |
|||
isCompact: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
styleType: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
isFixed: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: "用户", |
|||
}, |
|||
subtitle: { |
|||
type: String, |
|||
default: "周杰伦 - 青花瓷", |
|||
}, |
|||
avatarUrl: { |
|||
type: String, |
|||
default: "https://picsum.photos/80/80", |
|||
}, |
|||
actionText: { |
|||
type: String, |
|||
default: "暂停", |
|||
}, |
|||
// 新增页面标识符，用于区分不同页面的灵动岛实例 |
|||
pageId: { |
|||
type: String, |
|||
default: "default_page", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isExpanded: false, |
|||
statusBarHeight: 0, |
|||
isScrolled: false, |
|||
scrollThreshold: 160, // 灵动岛大卡片高度（160rpx） |
|||
// 内部数据，减少对外部props的依赖 |
|||
currentTitle: "Hi！用户，欢迎回来～", |
|||
currentSubtitle: "2个权益 | 120时间银行", |
|||
currentAvatar: "https://picsum.photos/80/80", |
|||
currentAction: "激活你的Agent", |
|||
userInfo: {}, |
|||
JDSU_IMG_URL: "https://epic.js-dyyj.com", |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 计算实际显示状态：只有在固定模式下才使用内部状态 |
|||
actualCompactState() { |
|||
if (this.isScrolled) { |
|||
return !this.isExpanded; |
|||
} |
|||
return false; // 非滚动状态下始终展开 |
|||
}, |
|||
// 计算固定定位的top值 |
|||
fixedTopPosition() { |
|||
// 状态栏高度 + 导航栏高度(40px) + 间距(20px) |
|||
return this.statusBarHeight + 40 + 20; |
|||
}, |
|||
// 计算占位区域高度 - 始终保持固定高度，等于灵动岛大卡片高度 |
|||
placeholderHeight() { |
|||
// 占位区域高度应该等于灵动岛展开状态的高度 |
|||
// 包括上下边距：32rpx(上) + 160rpx(灵动岛) + 24rpx(下) = 216rpx |
|||
const islandHeightRpx = 160; // 灵动岛展开高度 |
|||
const topMarginRpx = 32; // 上边距 |
|||
const bottomMarginRpx = 24; // 下边距 |
|||
return topMarginRpx + islandHeightRpx + bottomMarginRpx; |
|||
}, |
|||
// 使用内部数据或props数据 |
|||
title() { |
|||
return this.currentTitle; |
|||
}, |
|||
subtitle() { |
|||
return this.currentSubtitle; |
|||
}, |
|||
avatarUrl() { |
|||
return this.currentAvatar; |
|||
}, |
|||
actionText() { |
|||
return this.currentAction; |
|||
}, |
|||
// 计算是否固定 |
|||
isFixed() { |
|||
return this.isScrolled; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// uni-app中通过父组件传递点击事件 |
|||
this.setStatusBarHeight(); |
|||
// 监听页面滚动 |
|||
this.addScrollListener(); |
|||
// 获取用户信息 |
|||
this.getUserInfo(); |
|||
}, |
|||
beforeDestroy() { |
|||
// 清理滚动监听 |
|||
this.removeScrollListener(); |
|||
}, |
|||
methods: { |
|||
toLogin() { |
|||
uni.navigateTo({ |
|||
url: "/pages/login/login", |
|||
}); |
|||
}, |
|||
handleToggle() { |
|||
if (this.isScrolled) { |
|||
// 固定模式下切换内部状态 |
|||
this.isExpanded = !this.isExpanded; |
|||
this.$emit("toggle", this.isExpanded); |
|||
} else { |
|||
// 非固定模式下触发外部事件 |
|||
this.$emit("toggle"); |
|||
} |
|||
}, |
|||
handleAction() { |
|||
this.$emit("action"); |
|||
}, |
|||
// 外部调用收缩方法 |
|||
collapseIsland() { |
|||
if (this.isScrolled && this.isExpanded) { |
|||
this.isExpanded = false; |
|||
this.$emit("toggle", this.isExpanded); |
|||
} |
|||
}, |
|||
// 添加滚动监听 |
|||
addScrollListener() { |
|||
// 只监听带页面ID的滚动事件，避免不同页面间的状态冲突 |
|||
const eventName = `pageScroll_${this.pageId}`; |
|||
console.log("DynamicIsland 添加滚动监听:", eventName); |
|||
uni.$on(eventName, this.handlePageScroll); |
|||
}, |
|||
// 移除滚动监听 |
|||
removeScrollListener() { |
|||
// 移除带页面ID的滚动监听 |
|||
const eventName = `pageScroll_${this.pageId}`; |
|||
uni.$off(eventName, this.handlePageScroll); |
|||
}, |
|||
// 处理页面滚动 |
|||
handlePageScroll(e) { |
|||
const scrollTop = e.scrollTop || e; |
|||
const shouldScroll = scrollTop > this.scrollThreshold; |
|||
|
|||
if (this.isScrolled !== shouldScroll) { |
|||
this.isScrolled = shouldScroll; |
|||
// 添加触觉反馈 |
|||
} |
|||
|
|||
// 滚动时自动收缩展开的灵动岛 |
|||
if (this.isScrolled) { |
|||
this.collapseIsland(); |
|||
} |
|||
}, |
|||
toOrder() { |
|||
uni.switchTab({ |
|||
url: '/pages/index/iSoul' |
|||
}) |
|||
}, |
|||
getCompactName() { |
|||
// 从用户信息中获取昵称 |
|||
if (this.userInfo && this.userInfo.nickname) { |
|||
return this.userInfo.nickname; |
|||
} |
|||
return "用户"; |
|||
}, |
|||
getStatNumber(type) { |
|||
// 从副标题中解析统计数据 |
|||
if (this.subtitle) { |
|||
if (type === "权益") { |
|||
const match = this.subtitle.match(/(\d+)个权益/); |
|||
return match ? match[1] : "0"; |
|||
} else if (type === "时间银行") { |
|||
const match = this.subtitle.match(/(\d+)时间银行/); |
|||
return match ? match[1] : "0"; |
|||
} |
|||
} |
|||
return "0"; |
|||
}, |
|||
// 设置状态栏高度 |
|||
setStatusBarHeight() { |
|||
try { |
|||
const systemInfo = uni.getSystemInfoSync(); |
|||
this.statusBarHeight = systemInfo.statusBarHeight || 0; |
|||
} catch (e) { |
|||
console.warn("获取系统信息失败:", e); |
|||
this.statusBarHeight = 0; |
|||
} |
|||
}, |
|||
// 获取用户信息 |
|||
getUserInfo() { |
|||
try { |
|||
this.userInfo = |
|||
(uni.getStorageSync("userInfo") && |
|||
JSON.parse(uni.getStorageSync("userInfo"))) || |
|||
this.$store.state.user.userInfo || {}; |
|||
console.log(this.userInfo, "this.userInfo"); |
|||
// 更新标题显示用户昵称 |
|||
if (this.userInfo && this.userInfo.nickname) { |
|||
this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`; |
|||
} |
|||
} catch (e) { |
|||
console.warn("获取用户信息失败:", e); |
|||
this.userInfo = {}; |
|||
} |
|||
}, |
|||
toWebView() { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/webPage/webPage?url=" + |
|||
"https://des.js-dyyj.com/dist/#/", |
|||
}); |
|||
}, |
|||
|
|||
// 图片显示方法 |
|||
showImg(img) { |
|||
if (!img) return; |
|||
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) { |
|||
return img; |
|||
} else { |
|||
return this.JDSU_IMG_URL + img; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
/* 灵动岛占位区域样式 - 始终存在但控制可见性 */ |
|||
.dynamic-island-placeholder { |
|||
width: 100%; |
|||
background: transparent; |
|||
position: relative; |
|||
opacity: 1; |
|||
transition: opacity 0.3s ease; |
|||
padding: 24rpx 0; |
|||
} |
|||
|
|||
.dynamic-island-placeholder.visible { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* 当灵动岛不是固定状态时，确保它在占位符内正常显示 */ |
|||
.dynamic-island-placeholder .dynamic-island:not(.fixed) { |
|||
position: relative; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.dynamic-island { |
|||
// margin: 24rpx auto 24rpx; |
|||
margin: 0 auto; |
|||
z-index: 100; |
|||
|
|||
background: linear-gradient(180deg, #fffdb7 0%, #97fffa 100%); |
|||
backdrop-filter: blur(20rpx); |
|||
-webkit-backdrop-filter: blur(20rpx); |
|||
border-radius: 40rpx; |
|||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), |
|||
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; |
|||
|
|||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|||
overflow: hidden; |
|||
|
|||
// 展开状态 |
|||
width: 710rpx; |
|||
height: 216rpx; |
|||
|
|||
// 紧凑状态 |
|||
&.compact { |
|||
width: 300rpx; |
|||
height: 80rpx; |
|||
border-radius: 40rpx; |
|||
|
|||
.expanded-content { |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; |
|||
} |
|||
} |
|||
|
|||
&:not(.compact) { |
|||
.compact-content { |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; |
|||
} |
|||
} |
|||
|
|||
// 固定定位状态 |
|||
&.fixed { |
|||
position: fixed; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
z-index: 998; |
|||
margin: 0; |
|||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|||
animation: slideInFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; |
|||
} |
|||
} |
|||
|
|||
.expanded-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
padding: 24rpx 25rpx; |
|||
opacity: 1; |
|||
visibility: visible; |
|||
transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; |
|||
} |
|||
|
|||
/* 三栏布局样式 */ |
|||
.three-column-layout { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 列分隔线 */ |
|||
.column-divider { |
|||
width: 2rpx; |
|||
height: 160rpx; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
margin: 0rpx 25rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
/* 左侧区域 */ |
|||
.left-section { |
|||
color: #333; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
height: 100%; |
|||
} |
|||
|
|||
.welcome-message { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.welcome-text { |
|||
font-size: 22rpx; |
|||
color: #000000; |
|||
line-height: 1.2; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.welcome-subtitle { |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
margin-top: 4rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.stats-info { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.stats-number { |
|||
font-size: 40rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.stats-unit { |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
margin-left: 4rpx; |
|||
} |
|||
|
|||
.stats-label { |
|||
font-size: 22rpx; |
|||
color: #000000; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 中间区域 */ |
|||
.middle-section { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
|
|||
.time-reward-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.time-reward-title { |
|||
font-size: 20rpx; |
|||
color: #000000; |
|||
font-weight: 500; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.time-reward-stats { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.time-reward-number { |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.time-reward-unit { |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
margin-left: 4rpx; |
|||
} |
|||
|
|||
.time-reward-label { |
|||
font-size: 22rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
/* 右侧区域 */ |
|||
.right-section { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
height: 100%; |
|||
} |
|||
|
|||
.avatar-container { |
|||
position: relative; |
|||
margin-right: 10rpx; |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.profile-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.profile-title { |
|||
font-size: 26rpx; |
|||
color: #000000; |
|||
margin-bottom: 4rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.profile-name { |
|||
font-size: 26rpx; |
|||
color: #000000; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.platform-link { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.link-text { |
|||
font-size: 22rpx; |
|||
color: #000000; |
|||
text-decoration: underline; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 保留原有的底部区域样式用于timeShop模式 */ |
|||
.bottom-section { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
color: #000000; |
|||
} |
|||
|
|||
.stats-section { |
|||
display: flex; |
|||
gap: 32rpx; |
|||
} |
|||
|
|||
.stat-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.stat-number { |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.stat-label { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
line-height: 1; |
|||
font-weight: bold; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.divider { |
|||
width: 2rpx; |
|||
height: 60rpx; |
|||
background: rgba(255, 255, 255, 0.3); |
|||
margin: 0 24rpx; |
|||
} |
|||
|
|||
.action-section { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.action-text { |
|||
font-size: 26rpx; |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
max-width: 200rpx; |
|||
} |
|||
|
|||
// 添加点击反馈动画 |
|||
.dynamic-island:active { |
|||
transform: scale(0.98); |
|||
|
|||
&.fixed { |
|||
transform: translateX(-50%) scale(0.98); |
|||
} |
|||
} |
|||
|
|||
// 从顶部滑入动画 |
|||
@keyframes slideInFromTop { |
|||
0% { |
|||
transform: translateX(-50%) translateY(-100%); |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
transform: translateX(-50%) translateY(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
.compact-content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 100%; |
|||
padding: 0 24rpx; |
|||
opacity: 1; |
|||
visibility: visible; |
|||
transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; |
|||
} |
|||
|
|||
.compact-name { |
|||
font-size: 27rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
flex: 1; |
|||
text-align: left; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
max-width: 200rpx; |
|||
} |
|||
|
|||
.compact-avatar { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid rgba(0, 0, 0, 0.2); |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
// 动画定义 |
|||
@keyframes pulse { |
|||
0% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
|
|||
50% { |
|||
opacity: 0.6; |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
|
|||
// 响应式适配 |
|||
// @media (max-width: 750rpx) { |
|||
// .dynamic-island { |
|||
// &.is-expanded { |
|||
// width: 100vw; |
|||
// max-width: 750rpx; |
|||
// } |
|||
|
|||
// &.is-compact { |
|||
// width: 280rpx; |
|||
// } |
|||
// } |
|||
// } |
|||
.action-text-box { |
|||
color: #000000; |
|||
|
|||
.action-text-box-des { |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.action-text-box-msg { |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.action-text-box-img { |
|||
width: 57rpx; |
|||
height: 46rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,293 +0,0 @@ |
|||
# SwipeToNext 组件使用文档 |
|||
|
|||
## 组件介绍 |
|||
|
|||
`SwipeToNext` 是一个通用的触底跳转组件，封装了手势检测、延迟防抖、提示文字等功能，可以在任何需要滑动跳转的页面中使用。 |
|||
|
|||
## 组件特性 |
|||
|
|||
- ✅ 手势滑动检测 |
|||
- ✅ 防误触发机制（延迟允许跳转） |
|||
- ✅ 可配置的滑动阈值 |
|||
- ✅ 自定义提示文字 |
|||
- ✅ 支持事件监听 |
|||
- ✅ 完全可配置的参数 |
|||
|
|||
## 使用方法 |
|||
|
|||
### 1. 引入组件 |
|||
|
|||
```vue |
|||
<script> |
|||
import SwipeToNext from '@/components/SwipeToNext.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
SwipeToNext |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 2. 基础使用 |
|||
|
|||
```vue |
|||
<template> |
|||
<SwipeToNext |
|||
:is-last-slide="isLastSlide" |
|||
:target-path="'/next/page'" |
|||
@swipe-to-next="handleSwipeToNext" |
|||
> |
|||
<!-- 你的页面内容 --> |
|||
<view class="content"> |
|||
<!-- 轮播图或其他内容 --> |
|||
</view> |
|||
</SwipeToNext> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isLastSlide: false |
|||
} |
|||
}, |
|||
methods: { |
|||
// 处理swiper切换或其他逻辑 |
|||
handlePageChange() { |
|||
// 根据你的逻辑设置 isLastSlide |
|||
this.isLastSlide = true; // 当到达最后一页时 |
|||
}, |
|||
handleSwipeToNext(targetPath) { |
|||
console.log('即将跳转到:', targetPath); |
|||
// 可以在这里添加额外的逻辑，如数据统计 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 3. 完整配置使用 |
|||
|
|||
```vue |
|||
<template> |
|||
<SwipeToNext |
|||
:is-last-slide="isLastSlide" |
|||
:target-path="'/next/page'" |
|||
:show-tip="true" |
|||
tip-text="向上滑动查看更多内容" |
|||
:swipe-threshold="100" |
|||
:delay-time="800" |
|||
:enable-delay="true" |
|||
@swipe-to-next="handleSwipeToNext" |
|||
> |
|||
<!-- 你的页面内容 --> |
|||
<view class="content"> |
|||
<!-- 内容区域 --> |
|||
</view> |
|||
</SwipeToNext> |
|||
</template> |
|||
``` |
|||
|
|||
## Props 参数 |
|||
|
|||
| 参数名 | 类型 | 默认值 | 必填 | 说明 | |
|||
|--------|------|--------|------|------| |
|||
| `isLastSlide` | Boolean | `false` | ✅ | 是否在最后一页/最后一个状态 | |
|||
| `targetPath` | String | - | ✅ | 跳转的目标路径 | |
|||
| `showTip` | Boolean | `true` | ❌ | 是否显示提示文字 | |
|||
| `tipText` | String | `'继续向上滑动进入下一章节'` | ❌ | 提示文字内容 | |
|||
| `swipeThreshold` | Number | `80` | ❌ | 滑动阈值（像素） | |
|||
| `delayTime` | Number | `500` | ❌ | 延迟允许跳转的时间（毫秒） | |
|||
| `enableDelay` | Boolean | `true` | ❌ | 是否启用延迟机制 | |
|||
| `alwaysEnable` | Boolean | `false` | ❌ | 是否总是启用跳转（忽略isLastSlide状态） | |
|||
|
|||
## Events 事件 |
|||
|
|||
| 事件名 | 参数 | 说明 | |
|||
|--------|------|------| |
|||
| `swipe-to-next` | `targetPath` | 触发跳转时的回调事件 | |
|||
|
|||
## 使用场景示例 |
|||
|
|||
### 场景1：图片轮播页面 |
|||
|
|||
```vue |
|||
<template> |
|||
<SwipeToNext |
|||
:is-last-slide="currentIndex === images.length - 1" |
|||
:target-path="'/gallery/next'" |
|||
> |
|||
<swiper @change="handleSwiperChange"> |
|||
<swiper-item v-for="(img, index) in images" :key="index"> |
|||
<image :src="img" mode="aspectFit" /> |
|||
</swiper-item> |
|||
</swiper> |
|||
</SwipeToNext> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
images: ['img1.jpg', 'img2.jpg', 'img3.jpg'] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 场景2：文章阅读页面 |
|||
|
|||
```vue |
|||
<template> |
|||
<SwipeToNext |
|||
:is-last-slide="isReadComplete" |
|||
:target-path="'/article/next'" |
|||
tip-text="继续滑动阅读下一篇文章" |
|||
:swipe-threshold="60" |
|||
> |
|||
<scroll-view @scrolltolower="handleScrollToBottom"> |
|||
<view class="article-content"> |
|||
<!-- 文章内容 --> |
|||
</view> |
|||
</scroll-view> |
|||
</SwipeToNext> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isReadComplete: false |
|||
} |
|||
}, |
|||
methods: { |
|||
handleScrollToBottom() { |
|||
// 滚动到底部时认为阅读完成 |
|||
this.isReadComplete = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 场景4：单张图片或总是启用触底跳转 |
|||
|
|||
```vue |
|||
<template> |
|||
<SwipeToNext |
|||
:always-enable="true" |
|||
:target-path="'/next/chapter'" |
|||
tip-text="向上滑动查看下一内容" |
|||
:enable-delay="false" |
|||
> |
|||
<view class="single-image"> |
|||
<image :src="imageUrl" mode="aspectFit" /> |
|||
</view> |
|||
</SwipeToNext> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
imageUrl: 'single-image.jpg' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
```vue |
|||
<template> |
|||
<SwipeToNext |
|||
:is-last-slide="currentStep === totalSteps - 1" |
|||
:target-path="'/guide/complete'" |
|||
tip-text="向上滑动完成引导" |
|||
> |
|||
<view class="guide-step"> |
|||
<view class="step-content"> |
|||
步骤 {{ currentStep + 1 }} / {{ totalSteps }} |
|||
</view> |
|||
<button @click="nextStep">下一步</button> |
|||
</view> |
|||
</SwipeToNext> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentStep: 0, |
|||
totalSteps: 5 |
|||
} |
|||
}, |
|||
methods: { |
|||
nextStep() { |
|||
if (this.currentStep < this.totalSteps - 1) { |
|||
this.currentStep++; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
## 特殊情况处理 |
|||
|
|||
### 单张图片问题 |
|||
|
|||
当只有一张图片时，传统的 `isLastSlide` 逻辑不适用。这时可以使用 `alwaysEnable` 参数： |
|||
|
|||
```vue |
|||
<!-- 单张图片的解决方案 --> |
|||
<SwipeToNext |
|||
:always-enable="true" |
|||
:target-path="'/next/page'" |
|||
:enable-delay="false" |
|||
> |
|||
<image src="single-image.jpg" /> |
|||
</SwipeToNext> |
|||
``` |
|||
|
|||
### 参数优先级 |
|||
|
|||
当 `alwaysEnable="true"` 时： |
|||
- 忽略 `isLastSlide` 的值 |
|||
- 总是显示提示文字 |
|||
- 总是允许触底跳转 |
|||
- 建议设置 `enableDelay="false"` 以获得更好的响应速度 |
|||
|
|||
|
|||
|
|||
1. **确保正确设置 `isLastSlide`**：这是控制是否允许跳转的关键属性 |
|||
2. **路径格式**：`targetPath` 需要是有效的 uni-app 路由路径 |
|||
3. **性能考虑**：如果不需要延迟机制，可以设置 `enableDelay: false` 来提高响应速度 |
|||
4. **样式覆盖**：组件内的提示文字样式可以通过全局样式覆盖 |
|||
5. **事件监听**：建议监听 `swipe-to-next` 事件进行数据统计或其他操作 |
|||
|
|||
## 自定义样式 |
|||
|
|||
如果需要自定义提示文字的样式，可以在页面中添加： |
|||
|
|||
```scss |
|||
// 覆盖组件样式 |
|||
.swipe-to-next .bottom-tip { |
|||
bottom: 200rpx !important; // 调整位置 |
|||
background: rgba(255, 255, 255, 0.9) !important; // 改变背景色 |
|||
|
|||
text { |
|||
color: #333 !important; // 改变文字颜色 |
|||
font-size: 32rpx !important; // 改变字体大小 |
|||
} |
|||
} |
|||
``` |
|||
|
|||
这个组件极大地简化了触底跳转功能的实现，让你可以专注于业务逻辑而不用重复编写相同的手势检测代码。 |
|||
@ -1,225 +0,0 @@ |
|||
# 跨页面音频控制解决方案 |
|||
|
|||
## 进一步优化：解决跨页面状态同步问题 |
|||
|
|||
### 问题描述 |
|||
在跨页面场景下，当音频正在播放时跳转到新页面，新页面的MusicControl组件不知道有音频在播放，点击背景音乐按钮时会直接播放背景音乐，导致音频和背景音乐同时播放。 |
|||
|
|||
### 解决方案 |
|||
|
|||
#### 1. MusicControl组件增强检测 |
|||
```javascript |
|||
// 在mounted生命周期中添加全局音频状态检测 |
|||
mounted() { |
|||
this.syncMusicState(); |
|||
this.checkGlobalAudioState(); // 新增：检查全局音频状态 |
|||
|
|||
// 定时器也要检查全局音频状态 |
|||
this.timer = setInterval(() => { |
|||
this.syncMusicState(); |
|||
this.checkGlobalAudioState(); |
|||
}, 1000); |
|||
} |
|||
|
|||
// 新增方法：检查全局音频状态 |
|||
checkGlobalAudioState() { |
|||
const app = getApp(); |
|||
if (app && app.globalData && app.globalData.currentAudio) { |
|||
const globalAudio = app.globalData.currentAudio; |
|||
this.isAudioPlaying = !globalAudio.paused; |
|||
} else { |
|||
this.isAudioPlaying = false; |
|||
} |
|||
} |
|||
``` |
|||
|
|||
#### 2. 全局音频管理工具优化 |
|||
```javascript |
|||
// 在音频状态变化时发送全局事件 |
|||
pauseCurrentAudio() { |
|||
const audio = this.getCurrentAudio(); |
|||
if (audio && !audio.paused) { |
|||
audio.pause(); |
|||
this.notifyAudioStateChange(false); // 通知状态变化 |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
// 新增：通知音频状态变化 |
|||
notifyAudioStateChange(isPlaying) { |
|||
if (typeof uni !== 'undefined') { |
|||
uni.$emit('audioPlaying', isPlaying); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 修复后的交互流程 |
|||
```mermaid |
|||
graph TD |
|||
A[跨页面跳转] --> B[MusicControl组件加载] |
|||
B --> C[检查全局音频状态] |
|||
C --> D{有音频在播放?} |
|||
D -->|是| E[设置isAudioPlaying=true] |
|||
D -->|否| F[设置isAudioPlaying=false] |
|||
E --> G[点击背景音乐按钮] |
|||
F --> G |
|||
G --> H{检查isAudioPlaying} |
|||
H -->|有音频| I[先暂停音频再播放背景音乐] |
|||
H -->|无音频| J[直接播放背景音乐] |
|||
``` |
|||
|
|||
## 问题描述 |
|||
|
|||
AudioControl组件在页面跳转时会出现以下问题： |
|||
1. 组件状态重置，图标显示不正确 |
|||
2. 音频实例丢失连接，但音频可能仍在播放 |
|||
3. 无法在其他页面控制正在播放的音频 |
|||
|
|||
## 解决方案 |
|||
|
|||
### 1. 全局音频实例管理 |
|||
|
|||
在`App.vue`的`globalData`中添加`currentAudio`属性，用于保存当前的音频实例： |
|||
|
|||
```javascript |
|||
globalData: { |
|||
// ... 其他属性 |
|||
currentAudio: null // 全局音频实例 |
|||
} |
|||
``` |
|||
|
|||
### 2. AudioControl组件优化 |
|||
|
|||
#### 状态同步机制 |
|||
- 组件挂载时检查全局音频状态 |
|||
- 复用已存在的音频实例（如果URL匹配） |
|||
- 组件销毁时不销毁全局音频实例 |
|||
|
|||
#### 核心方法改进 |
|||
```javascript |
|||
// 检查全局音频状态 |
|||
checkGlobalAudioState() { |
|||
const app = getApp(); |
|||
if (app && app.globalData && app.globalData.currentAudio) { |
|||
const globalAudio = app.globalData.currentAudio; |
|||
if (globalAudio.src === this.audioSrc) { |
|||
this.isAudioPlaying = !globalAudio.paused; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 初始化音频时复用全局实例 |
|||
initAudio() { |
|||
const app = getApp(); |
|||
if (app && app.globalData && app.globalData.currentAudio) { |
|||
if (app.globalData.currentAudio.src === this.audioSrc) { |
|||
// 复用现有实例 |
|||
this.audioContext = app.globalData.currentAudio; |
|||
this.isAudioPlaying = !this.audioContext.paused; |
|||
return; |
|||
} |
|||
} |
|||
// 创建新实例... |
|||
} |
|||
``` |
|||
|
|||
### 3. 全局音频管理工具 |
|||
|
|||
创建了`utils/globalAudioManager.js`工具类，提供统一的音频控制接口： |
|||
|
|||
```javascript |
|||
// 在任何页面或组件中使用 |
|||
uni.$globalAudio.pauseCurrentAudio(); // 暂停当前音频 |
|||
uni.$globalAudio.playCurrentAudio(); // 播放当前音频 |
|||
uni.$globalAudio.isAudioPlaying(); // 检查播放状态 |
|||
uni.$globalAudio.getCurrentAudioSrc(); // 获取当前音频源 |
|||
``` |
|||
|
|||
## 使用示例 |
|||
|
|||
### 在页面中控制音频 |
|||
|
|||
```vue |
|||
<template> |
|||
<view> |
|||
<!-- 音频控制组件 --> |
|||
<AudioControl :audioSrc="audioUrl" /> |
|||
|
|||
<!-- 手动控制按钮 --> |
|||
<button @click="toggleAudio">切换音频</button> |
|||
<button @click="stopAudio">停止音频</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import AudioControl from '@/components/AudioControl.vue'; |
|||
|
|||
export default { |
|||
components: { AudioControl }, |
|||
data() { |
|||
return { |
|||
audioUrl: this.showImg('/uploads/audio/chapter1.mp3') |
|||
} |
|||
}, |
|||
methods: { |
|||
toggleAudio() { |
|||
if (uni.$globalAudio.isAudioPlaying()) { |
|||
uni.$globalAudio.pauseCurrentAudio(); |
|||
} else { |
|||
uni.$globalAudio.playCurrentAudio(); |
|||
} |
|||
}, |
|||
|
|||
stopAudio() { |
|||
uni.$globalAudio.stopCurrentAudio(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 在其他页面检查音频状态 |
|||
|
|||
```javascript |
|||
// 在任何页面的onShow生命周期中 |
|||
onShow() { |
|||
// 检查是否有音频在播放 |
|||
if (uni.$globalAudio.isAudioPlaying()) { |
|||
console.log('有音频正在播放:', uni.$globalAudio.getCurrentAudioSrc()); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## 技术优势 |
|||
|
|||
### ✅ **状态持久化** |
|||
- 音频实例在页面跳转时不会丢失 |
|||
- 组件状态能够正确同步全局音频状态 |
|||
|
|||
### ✅ **跨页面控制** |
|||
- 在任何页面都可以控制当前播放的音频 |
|||
- 提供统一的音频管理接口 |
|||
|
|||
### ✅ **资源优化** |
|||
- 避免创建多个音频实例 |
|||
- 自动清理无用的音频资源 |
|||
|
|||
### ✅ **用户体验** |
|||
- 页面跳转时音频播放不中断 |
|||
- 图标状态显示正确 |
|||
- 音频控制逻辑一致 |
|||
|
|||
## 注意事项 |
|||
|
|||
1. **页面生命周期**：音频实例与页面生命周期解耦，需要手动管理 |
|||
2. **内存管理**：确保在应用退出时正确清理音频资源 |
|||
3. **状态同步**：多个AudioControl组件需要监听相同的全局状态 |
|||
4. **错误处理**：增强错误处理机制，确保音频异常时的状态恢复 |
|||
|
|||
## 兼容性 |
|||
|
|||
- ✅ uni-app |
|||
- ✅ 小程序环境 |
|||
- ✅ H5环境 |
|||
- ✅ APP环境 |
|||
@ -1,144 +0,0 @@ |
|||
# 音频与背景音乐交互功能说明 |
|||
|
|||
## Bug修复记录 |
|||
|
|||
### 问题描述 |
|||
当音频播放时点击背景音乐按钮，背景音乐暂停音频并开始播放。此时再点击关闭背景音乐，图标显示关闭状态但背景音乐仍在播放。 |
|||
|
|||
### 问题原因 |
|||
1. 点击背景音乐按钮时会发送事件暂停音频 |
|||
2. 音频暂停时会调用restoreBackgroundMusic恢复背景音乐 |
|||
3. 然后MusicControl再执行自己的切换逻辑 |
|||
4. 导致背景音乐被恢复后又被操作，状态混乱 |
|||
|
|||
### 解决方案 |
|||
1. **MusicControl组件优化**： |
|||
- 检测是否有音频在播放 |
|||
- 如有音频，先暂停音频，延迟执行背景音乐切换 |
|||
- 如无音频，直接切换背景音乐状态 |
|||
|
|||
2. **AudioControl组件优化**： |
|||
- 在handleBackgroundMusicToggle中只暂停音频 |
|||
- 不自动恢复背景音乐，让MusicControl自己控制 |
|||
|
|||
### 修复后的交互流程 |
|||
```mermaid |
|||
graph TD |
|||
A[点击背景音乐按钮] --> B{是否有音频播放?} |
|||
B -->|是| C[发送暂停音频事件] |
|||
C --> D[AudioControl暂停音频\n不恢复背景音乐] |
|||
D --> E[延迟100ms后切换背景音乐] |
|||
B -->|否| F[直接切换背景音乐状态] |
|||
``` |
|||
|
|||
## 实现的功能 |
|||
|
|||
### 🎵 **背景音乐控制音频** |
|||
当点击背景音乐控制按钮时： |
|||
- 如果有音频正在播放，会自动暂停音频 |
|||
- 然后正常切换背景音乐的播放/暂停状态 |
|||
|
|||
### 🎧 **音频控制背景音乐** |
|||
当点击音频控制按钮时： |
|||
- 播放音频时自动暂停背景音乐 |
|||
- 暂停音频时自动恢复背景音乐 |
|||
- 音频播放结束时自动恢复背景音乐 |
|||
|
|||
## 技术实现 |
|||
|
|||
### 事件通信机制 |
|||
使用uni-app的全局事件机制实现组件间通信： |
|||
|
|||
```javascript |
|||
// AudioControl组件发送事件 |
|||
uni.$emit('audioPlaying', true/false); |
|||
|
|||
// MusicControl组件发送事件 |
|||
uni.$emit('backgroundMusicToggle'); |
|||
|
|||
// 组件监听事件 |
|||
uni.$on('eventName', this.handlerFunction); |
|||
``` |
|||
|
|||
### 交互流程 |
|||
|
|||
#### 点击背景音乐按钮： |
|||
```mermaid |
|||
graph TD |
|||
A[点击背景音乐按钮] --> B[发送backgroundMusicToggle事件] |
|||
B --> C[AudioControl收到事件] |
|||
C --> D{音频是否在播放?} |
|||
D -->|是| E[暂停音频] |
|||
D -->|否| F[继续背景音乐操作] |
|||
E --> G[恢复背景音乐] |
|||
F --> H[切换背景音乐状态] |
|||
``` |
|||
|
|||
#### 点击音频按钮： |
|||
```mermaid |
|||
graph TD |
|||
A[点击音频按钮] --> B{当前音频状态?} |
|||
B -->|未播放| C[暂停背景音乐] |
|||
C --> D[播放音频] |
|||
D --> E[发送audioPlaying:true事件] |
|||
B -->|正在播放| F[暂停音频] |
|||
F --> G[恢复背景音乐] |
|||
G --> H[发送audioPlaying:false事件] |
|||
``` |
|||
|
|||
## 使用方法 |
|||
|
|||
在页面中同时使用两个组件： |
|||
|
|||
```vue |
|||
<template> |
|||
<view class="page-container"> |
|||
<!-- 页面内容 --> |
|||
|
|||
<!-- 音频控制组件 --> |
|||
<AudioControl :audioSrc="audioUrl" /> |
|||
|
|||
<!-- 背景音乐控制组件 --> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import AudioControl from '@/components/AudioControl.vue'; |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
AudioControl, |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
audioUrl: this.showImg('/uploads/audio/your-audio.mp3') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
## 优势特点 |
|||
|
|||
### ✅ **智能交互** |
|||
- 两个组件能够智能感知对方的状态 |
|||
- 避免同时播放音频和背景音乐造成的冲突 |
|||
- 提供良好的用户体验 |
|||
|
|||
### ✅ **解耦设计** |
|||
- 组件间通过事件通信，保持松耦合 |
|||
- 每个组件都能独立工作 |
|||
- 易于维护和扩展 |
|||
|
|||
### ✅ **状态同步** |
|||
- 实时同步音频和背景音乐的播放状态 |
|||
- 确保状态的一致性和准确性 |
|||
|
|||
## 注意事项 |
|||
|
|||
1. **事件监听清理**：组件销毁时会自动清理事件监听，避免内存泄漏 |
|||
2. **状态管理**：两个组件都维护各自的状态，通过事件保持同步 |
|||
3. **错误处理**：包含完善的错误处理机制，确保功能稳定运行 |
|||
Loading…
Reference in new issue