Page-Flip左右页布局设置封面左翻与开本方向控制

page-flip 默认将所有页面渲染在右侧，必须通过启用 showCover: true 来开启封面模式，并确保总页数为偶数且 DOM 顺序正确，才能实现标准书籍的左右分页效果——封面显示在右侧，第一页内容出现在左侧。

用 page-flip 实现模拟翻书效果时，很多开发者一开始就会踩坑：以为只要按顺序堆叠几个

，就能自动分出左右页。实际上并非如此。默认情况下，page-flip 会把所有页面都堆在右侧，始终呈现“单页右开”模式。除非你明确告知它：我需要双页布局。

核心解决方案只有一个配置项：showCover: true。这个选项不仅让书在初始状态看起来像一本闭合的实体书（封面位于最右侧），更重要的是，它激活了内部的双页左右逻辑。当书翻开后，第一页会出现在左侧，后续内容按照“左-右-左-右”成对排列——page 1 在左，page 2 在右，page 3 又在左……这才是传统印刷书籍的自然阅读流向，也是 page-flip 双页布局的核心机制。

✅ 正确配置示例（index.js）：

const pageFlip = new PageFlip(document.getElementById('book'), {
    width: 300,
    height: 300,
    showCover: true, // ← 必须启用！否则始终单侧渲染
});
// 注意：loadFromHTML 会按 DOM 顺序依次分配页码（索引从 0 开始）
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));

? 几个需要留意的细节：

• 封面位置由 showCover 决定：启用后，.page-cover 元素会作为物理封面固定在右侧。闭合时可见，翻开后，首内容页出现在左侧，这是 page-flip 左右页布局的关键。
• 页数建议为偶数：如果总页数（含封面）是奇数，最后一页结束后可能留出一个空白的右页。补一个空的
  或硬页（data-density="hard"）就能保持对称，避免翻页异常。
• DOM 顺序即阅读顺序：

  的排列必须严格对应翻页逻辑，封面 → P1 → P2 → … → 封底，顺序不能颠倒，否则双页渲染会错乱。

• 别手动加 left/right 类名：page-flip 内部通过 CSS transform 和 canvas 动态控制定位，外部干预很容易导致动画错位，影响翻书插件的稳定性。

? 进阶提示：如果想跳过封面，直接从 P1 左页开始，可以在初始化后调用 pageFlip.turnTo(1)（索引从 0 起，1 对应第二项，即 P1）。前提是 showCover: true 已启用，否则左右逻辑不生效，封面模式无法正常工作。

说白了，showCover: true 不只是 UI 层面的优化，它是开启 page-flip 双页渲染引擎的“钥匙”。忽略它，就等于放弃了真正的书籍翻页语义。掌握这一配置项，是构建专业级电子书交互体验的第一步，也是正确设置 page-flip 左右页布局的核心要点。