react-pageflip（翻书效果）

1.难点：之前没弄过，且找到的几个效果都不理想

2.知识点：在react中使用，我这里需求只要能翻页即可。不涉及到事件，如果有需要可以点这些链接去看官方如何写的。github地址、官方demo、文档地址

1.安装

pnpm add react-pageflip

2.引用

import HTMLFlipBook from "react-pageflip";

3.使用

<HTMLFlipBook
  width={previewImageList[0]?.width / 4}
  height={previewImageList[0]?.height / 2}
  className="mx-auto"
  style={{}}
  startPage={0}
  size={"fixed"} // 书籍是否在父元素下拉伸
  minWidth={0}
  maxWidth={1000}
  minHeight={0}
  maxHeight={1000}
  drawShadow={true} // 翻页时是否绘制阴影
  flippingTime={1000} // 翻转动画时间
  usePortrait={true} // 启用切换到纵向模式
  startZIndex={0} // z-index 的初始值
  autoSize={true} // 父元素将等于书籍的大小
  maxShadowOpacity={1} // 阴影强度（1：最大强度，0：隐藏阴影）
  showCover={true} // 则第一页和最后一页将被标记为硬页并以单页模式显示
  mobileScrollSupport={true} // 在移动设备上触摸书籍时禁用内容滚动
  clickEventForward={true} // 将点击事件转发给页面子 html 元素（仅适用于a和button标签）
  useMouseEvents={true} // 使用鼠标和触摸事件来翻页
  swipeDistance={30} // 检测滑动的最小距离
  showPageCorners={false}
  disableFlipByClick={false}
>
  // 写你的代码即可
</HTMLFlipBook>