Fetch the repository succeeded.
npm install @lydxwj/react-fullpage --save
import { PageContainer, Pages } from '@lydxwj/react-fullpage';
import '@lydxwj/react-fullpage/lib/css/styles.css';
<PageContainer onChange={(nowIdx, newIdx) => {
console.log(nowIdx);
console.log(newIdx);
}} onChangeEnd={(nowIdx) => {
console.log(nowIdx);
}}>
<Pages style={{
backgroundColor: '#51eabe',
}}></Pages>
<Pages style={{
backgroundColor: '#f4ea2a',
}}></Pages>
<Pages style={{
backgroundColor: '#1afa29',
}}></Pages>
<Pages style={{
backgroundColor: '#1296db',
}}></Pages>
</PageContainer>
import { PageContainer, Pages } from '@lydxwj/react-fullpage';
// PageContainer翻页组件盒子，Pages单个翻页组件
// 或者 import PageContainer from '@lydxwj/react-fullpage';
// PageContainer翻页组件盒子，PageContainer.Pages单个翻页组件
| 配置项 | 介绍 | 参数/默认值 |
|---|---|---|
| onChange | 页面翻转前回调 | nowIdx（当前页索引）, newIdx（翻转页页索引） |
| onChangeEnd | 页面翻转后回调 | nowIdx（当前页索引） |
| isArrow | 是否显示下滑提示箭头 | true（默认值） |
| isNav | 是否显示指示器 | true（默认值） |
| style | 样式对象 | 建议不设置height、width |
// PageContainer里面嵌套Pages来使用
<PageContainer>
<Pages></Pages>
</PageContainer>
| 配置项 | 介绍 | 参数/默认值 |
|---|---|---|
| againCof | 回看配置 | { isShow: true,是否显示 text: '回看', 文案配置} |
| again | 回看回调 | 无 |
| style | 样式对象 | 建议不设置height、width |
// Pages可以嵌套自己想要的页面内容
<Pages>
<div>页面内容</div>
</Pages>
说明: 仅支持移动端
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. Open source ecosystem
2. Collaboration, People, Software
3. Evaluation model