吸底模式和迷你模式同时设置时的问题

现象

代码里同时写了：

const ap = new APlayer({
    fixed: true,   // 吸底
    mini: true,    // 迷你
    audio: [...]
});

然后发现：

• 播放器看起来很奇怪，元素重叠
• 部分按钮消失
• 列表折叠 / 展开不正常
• 或者干脆什么都不显示

为什么会有这个问题

APlayer 的三种显示模式（正常、吸底、迷你）在 CSS 层面是完全不同的布局：

同时设置两个参数时，APlayer 内部的判断逻辑没有明确的优先级声明，两个模式的 CSS 类会同时加在元素上，导致样式冲突。

解决方案：选一个

fixed 和 mini 是互斥的，只能选一个：

// 方案 A：吸底（完整功能，固定底部）
const ap = new APlayer({
    fixed: true,
    audio: [...]
});

// 方案 B：迷你（精简布局，在内容区域）
const ap = new APlayer({
    mini: true,
    audio: [...]
});

如果你想要"精简 + 固定底部"

两个选项：

选项一：用吸底 + 自定义 CSS 隐藏元素

const ap = new APlayer({
    fixed: true,    // 吸底
    audio: [...]
});

然后在 CSS 里隐藏不需要的元素：

/* 隐藏封面 */
.fixed .aplayer-pic {
    display: none !important;
}

/* 隐藏歌词 */
.fixed .aplayer-lrc {
    display: none !important;
}

/* 隐藏列表按钮 */
.fixed .aplayer-list {
    display: none !important;
}

选项二：用迷你模式 + 自定义 CSS 让它 fixed

const ap = new APlayer({
    mini: true,
    audio: [...]
});

/* 把迷你模式改成固定底部 */
.aplayer.aplayer-mini {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

两种方式都能达到"精简 + 固定底部"的效果。推荐用选项一（吸底 + 精简），因为吸底模式的 CSS 本身就是为固定场景设计的，不容易出意外。

运行时切换模式

APlayer 不支持运行时切换 fixed 模式——这意味着你不能先 fixed 再 normal。但你可以切换 mini 和 normal：

ap.setMode('mini');
ap.setMode('normal');

如果你确实需要在 fixed 和非 fixed 之间切换，只能销毁后重新实例化：

ap.destroy();
ap = new APlayer({
    fixed: false,  // 改成 normal
    audio: [...]
});

检查清单

如果你看到了布局错乱，排查顺序：

1. 确认代码里没有同时写 fixed: true 和 mini: true——这是最直接的原因
2. 检查有没有旧的 APlayer CSS 缓存
3. 如果用了自定义 CSS，检查有没有 .aplayer-mini 和 .aplayer-fixed 选择器同时作用
4. 查看浏览器 DevTools Elements 面板，看播放器 DOM 元素上的 class 列表——是 .aplayer-fixed？.aplayer-mini？还是两个都有？