提交修改

This commit is contained in:
浅念
2025-12-22 11:44:02 +08:00
parent c60dda98a4
commit 4d6c0d6901
20 changed files with 470 additions and 112 deletions
+6 -5
View File
@@ -16,7 +16,7 @@
</button>
</view>
<view class="content" @click="handleView">
<view class="content">
<u-read-more :showHeight="80" ref="uReadMore" color="#999999" closeText="查看更多">
<rich-text :nodes="item.content" @load="handleContentLoad"></rich-text>
</u-read-more>
@@ -190,12 +190,13 @@ export default {
color: #3BC6BD;
}
.chat-btn2{
background: rgb(255 0 0 / 20%);
color: #fff;
}
.chat-btn3{
background: rgb(62 94 215 / 20%);
color: #3E5ED7;
}
.chat-btn3{
background: rgb(255 0 0 / 20%);
color: #FF0000;
}
.chat-btn4{
background: rgb(105 105 105 / 20%);
+40 -18
View File
@@ -9,6 +9,7 @@
animationDuration: item.speed + 's',
color: item.color
}"
@animationend="finishDanmu(item.id, item.lane)"
>
{{ item.text }}
</view>
@@ -26,7 +27,8 @@ export default {
data() {
return {
danmuItems: [],
laneBusy: [] // 轨道是否被占用
laneBusy: [], // 轨道是否被占用
pendingQueue: [] // 等待队列
}
},
@@ -39,30 +41,35 @@ export default {
startDanmu() {
let index = 0
setInterval(() => {
const text = this.list[index].content
this.createDanmu(text)
index = (index + 1) % this.list.length
}, 1500)
if (this.list && this.list.length > 0) {
const text = this.list[index].content
this.createDanmu(text)
index = (index + 1) % this.list.length
}
}, 2200)
},
createDanmu(text) {
const lane = this.getFreeLane()
// 如果没有空闲轨道,加入等待队列
if (lane === -1) {
this.pendingQueue.push(text)
return
}
const id = Date.now() + Math.random()
const item = {
id,
text,
top: lane * 100, // 每条轨道高度 60rpx
speed: 6 + Math.random()*2,
top: lane * 80 + 20, // 每条轨道高度 80rpx,顶部留20rpx间距
speed: 14 + Math.random()*6,
color: this.randomColor(),
lane
}
this.danmuItems.push(item)
setTimeout(() => {
this.finishDanmu(id, lane)
}, item.speed * 1000)
},
getFreeLane() {
@@ -73,15 +80,26 @@ export default {
return i
}
}
// 如果都满了,就随机一个
return Math.floor(Math.random() * this.row)
// 如果都满了,返回-1,不创建弹幕
return -1
},
finishDanmu(id, lane) {
// 移除弹幕项
this.danmuItems = this.danmuItems.filter(i => i.id !== id)
// 整个动画跑完后释放轨道
this.laneBusy[lane] = false
// 释放轨道
if (lane !== undefined && lane >= 0) {
this.laneBusy[lane] = false
// 检查等待队列,如果有等待的弹幕,立即创建
if (this.pendingQueue.length > 0) {
const text = this.pendingQueue.shift()
this.$nextTick(() => {
this.createDanmu(text)
})
}
}
},
randomColor() {
@@ -96,7 +114,7 @@ export default {
.danmu-container {
position: absolute;
left: 0;
top: 88rpx;
top: 450rpx;
width: 100%;
height: 600rpx;
overflow: hidden;
@@ -115,10 +133,14 @@ export default {
background: rgb(0 0 0 / 60%);
padding: 5px 14px;
border-radius: 20px;
line-height: 1.5;
max-width: 600rpx;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes danmu-move {
from { transform: translateX(0); }
to { transform: translateX(-1200rpx); }
to { transform: translateX(-150vw); }
}
</style>