如何在 page-flip 中正确设置左右页布局（封面左翻与开本方向控制）

page-flip 默认将所有页面渲染在右侧，需通过 showCover: true 启用封面模式，并配合偶数页数与 DOM 顺序，才能实现标准书籍的左右分页效果（封面在右、第一页在左）。

page-flip 默认将所有页面渲染在右侧，需通过 `showcover: true` 启用封面模式，并配合偶数页数与 dom 顺序，才能实现标准书籍的左右分页效果（封面在右、第一页在左）。

在使用 page-flip 实现模拟翻书效果时，一个常见误区是认为只需按顺序添加 <div class="my-page"> 就能自动区分左右页——实际上，该库默认以“单页右开”模式渲染，所有内容均显示在右侧，除非显式启用双页布局机制。

关键解决方案在于启用 showCover: true 配置项。该选项不仅让书籍初始状态显示为闭合封面（视觉上更符合真实书籍），更重要的是——它激活内部的左右页逻辑：当书籍打开后，第一页将自动呈现在左侧，后续页面按“左-右”成对排布（即 page 1 → 左页，page 2 → 右页，page 3 → 左页……），从而真正实现传统印刷书籍的阅读流向。

✅ 正确配置示例（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 元素将作为物理封面固定在最右侧（闭合态可见），翻开后首内容页出现在左侧；
• 页数建议为偶数：若总页数（含封面）为奇数，末尾可能出现空白右页；推荐补一个空 <div class="my-page"></div> 或硬页（data-density="hard"）保持对称；
• DOM 顺序即阅读顺序：<div> 的排列必须严格对应实际翻页逻辑（封面 → P1 → P2 → … → 封底），不可颠倒；
• 避免手动设置 left/right 类名：page-flip 内部通过 CSS transform 和 canvas 动态控制定位，外部干预可能导致动画错位。

? 进阶提示：如需自定义起始页（例如跳过封面直接从 P1 左页开始），可调用 pageFlip.turnTo(1)（索引从 0 起，1 对应第二项，即 P1）并在初始化后触发，但前提是 showCover: true 已启用，否则左右逻辑不生效。

总之，showCover: true 不仅是 UI 优化选项，更是开启 page-flip 双页渲染引擎的“开关”。忽略它，就等于放弃了真正的书籍翻页语义——掌握这一点，是构建专业级电子书交互体验的第一步。