Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
lls_program
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-10-29 09:54:52 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
a2cc421cea0a78cdb70730efc0253b008561eb26
a2cc421c
1 parent
0f44b93b
feat(弹幕组件): 优化弹幕循环逻辑和持续性
增强弹幕组件的循环逻辑,确保在没有数据时自动重新获取 调整弹幕轨道数量和容器高度以优化显示效果
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
32 additions
and
18 deletions
src/components/NativeDanmuComponent.vue
src/pages/FamilyRank/index.vue
src/components/NativeDanmuComponent.vue
View file @
a2cc421
...
...
@@ -387,7 +387,7 @@ const startDanmuAnimation = (danmu, track) => {
animationTimers.value.set(danmu.id, timer)
}
// 重置弹幕位置实现循环
// 重置弹幕位置实现循环
- 增强持续性
const resetDanmuForLoop = (danmu, track) => {
if (!isPlaying.value) return
...
...
@@ -395,10 +395,20 @@ const resetDanmuForLoop = (danmu, track) => {
danmu.isMoving = false
danmu.opacity = 1
// 切换下一条数据,
遵循首轮不重复规则
// 切换下一条数据,
确保持续循环
const nextData = getNextUnusedDanmu()
if (nextData) {
danmu.data = nextData
} else {
// 如果没有数据,重新获取弹幕数据
console.log('弹幕数据不足,尝试重新获取')
fetchDanmuData().then(() => {
const retryData = getNextUnusedDanmu()
if (retryData) {
danmu.data = retryData
}
})
return
}
// 复位到右侧并重新计时
...
...
@@ -407,7 +417,11 @@ const resetDanmuForLoop = (danmu, track) => {
track.lastDanmuTime = Date.now()
// 重新启动动画(无缝继续)
nextTick(() => {
nextTick(async () => {
// 重新测量宽度,确保准确性
await measureDanmuWidth(danmu)
recalculateDuration(danmu)
danmu.startTime = Date.now()
startDanmuAnimation(danmu, track)
})
}
...
...
@@ -441,7 +455,7 @@ const resetDanmuIndex = () => {
isFirstRound = true
}
// 获取下一个
未使用的弹幕数据
// 获取下一个
弹幕数据 - 优化循环逻辑
const getNextUnusedDanmu = () => {
if (!familyDanmus.value || familyDanmus.value.length === 0) {
return null
...
...
@@ -462,20 +476,17 @@ const getNextUnusedDanmu = () => {
currentDanmuIndex++
}
// 第一轮遍历完成
// 第一轮遍历完成
,开始无限循环
isFirstRound = false
currentDanmuIndex = 0
usedDanmuIds.clear()
console.log('弹幕第一轮完成,开始无限循环')
}
// 第一轮遍历完成后,重新开始循环
if (!isFirstRound) {
const danmuData = familyDanmus.value[currentDanmuIndex % familyDanmus.value.length]
currentDanmuIndex++
return danmuData
}
return null
// 无限循环模式 - 确保永远有弹幕
const danmuData = familyDanmus.value[currentDanmuIndex % familyDanmus.value.length]
currentDanmuIndex = (currentDanmuIndex + 1) % familyDanmus.value.length
return danmuData
}
// 发送顺序弹幕
...
...
@@ -488,7 +499,7 @@ const sendSequentialDanmu = () => {
}
}
// 自动发送弹幕
// 自动发送弹幕
- 增强持续性
let autoSendTimer = null
const startAutoSend = () => {
if (autoSendTimer) return
...
...
@@ -510,7 +521,10 @@ const startAutoSend = () => {
const intervalMultiplier = Math.max(1, (6 - availableTrackCount) * 0.2) // 减少间隔倍数
const dynamicInterval = baseInterval * intervalMultiplier + Math.random() * 300
autoSendTimer = setTimeout(sendNext, dynamicInterval)
// 确保持续循环,即使暂时没有可用轨道也要继续尝试
if (isPlaying.value) {
autoSendTimer = setTimeout(sendNext, dynamicInterval)
}
}
// 立即发送第一条弹幕,不等待
...
...
src/pages/FamilyRank/index.vue
View file @
a2cc421
<!--
* @Date: 2025-09-01 13:07:52
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-2
8 16:36:47
* @LastEditTime: 2025-10-2
9 09:53:38
* @FilePath: /lls_program/src/pages/FamilyRank/index.vue
* @Description: 文件描述
-->
...
...
@@ -159,9 +159,9 @@
<!-- 隐藏的弹幕组件,在页面加载时就开始滚动 -->
<view class="danmu-section mt-8" :style="{ visibility: activeTab === 'support' ? 'visible' : 'hidden', position: activeTab === 'support' ? 'static' : 'absolute', top: activeTab === 'support' ? 'auto' : '-9999px' }">
<NativeDanmuComponent
:container-height="1
2
00"
:container-height="1
1
00"
:show-controls="true"
:track-count="
7
"
:track-count="
5
"
@danmu-click="handleDanmuClick"
@danmu-hover="handleDanmuHover"
ref="danmuRef"
...
...
Please
register
or
login
to post a comment