提交修改

components/danmu/danmu.vue

@@ -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>