tweak(wish-tree): 弹幕改为4行布局
Publish Mini Program Dev Version / publish (push) Successful in 1m10s

- 树桩处3行(64/71/78%),不再遮挡上方树冠便签
- 置顶轮播下方新增1行滚动弹幕(16%)
- 同行统一慢速(树桩32s/顶部26s飘完全屏),按条数均匀错开起始位置,互相不盖
This commit is contained in:
gouki
2026-08-10 08:45:38 +00:00
parent ac2c99c3bc
commit f7d88622e0
+35 -10
View File
@@ -211,16 +211,8 @@ Page({
};
});
// 其余以弹幕飘过
const danmaku = list.slice(MAX_HANG).map((w, i) => ({
id: w.id,
content: w.content,
author: w.author || '匿名',
type: w.type,
top: 12 + (i % 6) * 7,
duration: 16 + w.content.length * 0.4,
delay: -(i * 2.1),
}));
// 其余以弹幕飘过:树桩处3行 + 置顶轮播下方1行,慢速均匀间隔不重叠
const danmaku = this.buildDanmaku(list.slice(MAX_HANG));
const cache = { hangWishes, danmaku, top };
this.wishCache[tree.id] = cache;
@@ -236,6 +228,39 @@ Page({
});
},
// 构建弹幕:共 4 行(行 0-2 树桩处三行,行 3 顶部置顶轮播下方)
// 同行统一慢速,按条数均匀错开起始位置,避免互相盖住
buildDanmaku(list) {
const DURATION_BOTTOM = 32; // 树桩处一行飘完全屏的秒数(慢速)
const DURATION_TOP = 26; // 顶部行稍快一点
const ROW_TOPS = [64, 71, 78, 16]; // 前三行靠近树桩,第四行在顶部
// 轮流分配到 4 行
const rows = [[], [], [], []];
list.forEach((w, i) => {
rows[i % 4].push(w);
});
const items = [];
rows.forEach((rowList, row) => {
if (rowList.length === 0) return;
const duration = row === 3 ? DURATION_TOP : DURATION_BOTTOM;
rowList.forEach((w, idx) => {
items.push({
id: w.id,
content: w.content,
author: w.author || '匿名',
type: w.type,
top: ROW_TOPS[row],
duration,
// 均匀间隔:同屏内前后错开,不会盖住其他弹幕
delay: -(idx * duration / rowList.length),
});
});
});
return items;
},
// 格式化许愿
formatWish(w, i) {
const colors = TAG_COLORS[i % TAG_COLORS.length];