fix(wish-tree): 弹幕一行一条排队播放,不再重叠
Publish Mini Program Dev Version / publish (push) Successful in 1m4s
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:
@@ -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>
|
||||
|
||||
<!-- 边缘暗角 -->
|
||||
|
||||
Reference in New Issue
Block a user