fix(wish-tree): 弹幕一行一条排队播放,不再重叠
Publish Mini Program Dev Version / publish (push) Successful in 1m4s

- 顶部滚动行上移紧贴置顶轮播(16%→12%)
- 树桩3行改为68/73/78%,更紧凑
- 核心修复重叠:弃用CSS无限循环+负delay(同屏多条),
  改为JS定时器按行调度,同一行一条飘完再出下一条,循环播放
- 弹幕动画改为只播一次,key含时间戳保证切换时重新触发动画
- 页面onHide/onUnload停止定时器,onShow恢复
This commit is contained in:
gouki
2026-08-10 13:27:19 +00:00
parent 87f5fa2478
commit a29328f35b
3 changed files with 106 additions and 32 deletions
+7 -7
View File
@@ -45,14 +45,14 @@
</swiper-item>
</swiper>
<!-- 弹幕层(超出50条的心愿缓缓飘过) -->
<!-- 弹幕层(超出30条的心愿缓缓飘过,每行一条完毕再出下一条 -->
<view class="danmaku-layer">
<view
wx:for="{{currentDanmaku}}"
wx:key="id"
class="danmaku-item {{item.type === 'paid' ? 'paid' : ''}}"
style="top: {{item.top}}%; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
>{{item.content}} · {{item.author}}</view>
<block wx:for="{{currentDanmaku}}" wx:key="key" wx:if="{{item}}">
<view
class="danmaku-item {{item.type === 'paid' ? 'paid' : ''}}"
style="top: {{item.top}}%; animation-duration: {{item.duration}}s;"
>{{item.content}} · {{item.author}}</view>
</block>
</view>
<!-- 边缘暗角 -->