@lydxwj/react-fullpage

@lydxwj/react-fullpage

安装

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单个翻页组件

组件配置

• PageContainer

配置项	介绍	参数/默认值
onChange	页面翻转前回调	nowIdx（当前页索引）, newIdx（翻转页页索引）
onChangeEnd	页面翻转后回调	nowIdx（当前页索引）
isArrow	是否显示下滑提示箭头	true（默认值）
isNav	是否显示指示器	true（默认值）
style	样式对象	建议不设置height、width

// PageContainer里面嵌套Pages来使用
<PageContainer>
  <Pages></Pages>
</PageContainer>

• Pages

配置项	介绍	参数/默认值
againCof	回看配置	{ isShow: true,是否显示 text: '回看', 文案配置}
again	回看回调	无
style	样式对象	建议不设置height、width

// Pages可以嵌套自己想要的页面内容
<Pages>
  <div>页面内容</div>
</Pages>

说明: 仅支持移动端

如果有问题欢迎交流