page-flip 默认将所有页面渲染在右侧，需启用 showCover: true 并合理组织 HTML 结构，才能实现真实翻书效果——封面单独显示，翻开后第一页居左、第二页居右，依此类推。
page-flip 默认将所有页面渲染在右侧，需启用 `showcover: true` 并合理组织 html 结构，才能实现真实翻书效果——封面单独显示，第一页居左、第二页居右，依此类推。
page-flip 库默认以“双页展开”模式模拟实体书，但其左右页分配逻辑依赖于是否启用封面模式及页面总数的奇偶性。关键在于：仅当 showCover: true 时，库才会将首尾硬页（如封面、封底）视为独立封面，并自动将后续内容页按左右交替排布；否则所有页面均作为右侧页加载，导致视觉错位。
✅ 正确配置步骤
- 启用封面模式：在初始化时显式设置 showCover: true；
- 确保封面/封底标记为 data-density="hard"（这是 page-flip 识别封面的必要条件）；
- 内容页数量应为偶数（或由库自动补白）：若内容页总数为奇数，page-flip 会自动在末尾添加空白页以保证左右配对。
修正后的 index.js 示例：
const pageFlip = new PageFlip(document.getElementById('book'), {
width: 300,
height: 300,
showCover: true // ? 必须启用！否则无法触发左右页逻辑
});
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
pageFlip.on('flip', (e) => {
console.log(`Flipped to page ${e.data?.pageIndex ?? 'unknown'}`);
});
? HTML 结构说明（推荐顺序）
<div id="book">
<!-- 封面：data-density="hard" + showCover: true → 单独显示 -->
<div class="my-page page-cover" data-density="hard">封面</div>
<!-- 内容页：从左页开始，成对出现 -->
<div class="my-page">第1页（左）</div>
<div class="my-page">第2页（右）</div>
<div class="my-page">第3页（左）</div>
<div class="my-page">第4页（右）</div>
<!-- 封底：data-density="hard" → 自动作为右页闭合 -->
<div class="my-page" data-density="hard">封底</div>
</div>
⚠️ 注意事项：
- 若未设置 showCover: true，即使有 data-density="hard" 的封面，也会被当作普通右页处理；
- page-flip 内部按索引偶数位为左页、奇数位为右页（0-indexed），因此内容页必须从第0个硬封面后连续排列；
- 调试时可通过 pageFlip.getProgress() 或监听 'flip' 事件中的 e.data.pageIndex 验证当前页位置。
启用 showCover: true 后，用户首次点击将翻开封面，露出左侧第1页与右侧第2页；继续翻页则自然遵循“左→右→左→右”节奏，完全符合纸质书阅读习惯。
