@hankliu/rc-fullpage

一个类似fullpage.js的 React 实现的组件，支持全屏滚动。

功能特征

• [x] 全屏滚动 React UI 组件

安装

npm install @hankliu/rc-fullpage --save

or

yarn add @hankliu/rc-fullpage

or

pnpm install @hankliu/rc-fullpage

使用

npm install
npm start

import FullPage from '@hankliu/rc-fullpage';
import * as React from 'react';
import styled from 'styled-components';

export default function Base() {
  const Options = {
    activeClass: 'active', // the class that is appended to the sections links
    anchors: [
      'resume-index',
      'resume-introduction',
      'resume-skill',
      'resume-experience',
      'resume-project',
      'resume-article',
    ], // the anchors for each sections
    shortcutKey: true, // use arrow keys
    className: 'resume-properties-section-container', // the class name for the section container
    delay: 1000, // the scroll animation speed
    dots: true, // use dots navigatio
    scrollBar: false, // use the browser default scrollbar
    sectionClassName: 'resume-properties-section resume-section-container', // the section class name
    sectionPaddingTop: '0', // the section top padding
    sectionPaddingBottom: '0', // the section bottom padding
    verticalAlign: false, // align the content of each section vertical
    touchable: true,
  };

  const Items = [
    'ResumeIndex',
    'ResumeIntroduction',
    'ResumeSkill',
    'ResumeExperience',
    'ResumeProject',
    'ResumeArticle',
  ];

  const Colors = ['#fcba85', '#e1105e', '#e6f952', '#23d2a6', '#4414bf', '#2899aa'];

  const renderResumeItem = (item, index) => {
    const ResumeIndex = styled.div`
      background-color: ${Colors[index]};
      mix-blend-mode: difference;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      box-sizing: border-box;
    `;
    return <ResumeIndex key={item}>{item}</ResumeIndex>;
  };

  const OutDiv = styled.div`
    height: 100vh;
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow-y: hidden;
  `;

  React.useEffect(() => {
    function reset() {
      if (document.querySelector('body')!.style.overflow === 'hidden') {
        document.querySelector('body')!.style.overflow = 'auto';
      }
      setTimeout(() => {
        reset();
      }, 300);
    }

    reset();
  }, []);

  const onFullScreen = () => {
    document.querySelector('.hlui-fullpage').requestFullscreen();
  };

  return (
    <>
      <div>{Items.join(' > ')}</div>
      <OutDiv>
        <FullPage {...Options}>
          {Items.map((item, index) => (
            <FullPage.Section
              id={item}
              className={item.replace(/(?!\b)([A-Z])/g, '-$1').toLowerCase()}
              key={item}
            >
              {renderResumeItem(item, index)}
            </FullPage.Section>
          ))}
        </FullPage>
      </OutDiv>
      <button style={{ marginTop: '10px' }} onClick={onFullScreen}>
        全屏
      </button>
    </>
  );
}

API 参数

| 名称 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | className | string | - | 组件外层元素 classname | | prefixCls | string | hlui-fullpage | 组件外层元素 classname 前缀 | | delay | number | 1000 | 持续动画时间(ms) | | verticalAlign | boolean | true | 是否为垂直方向全屏滚动 | | scrollBar | boolean | false | 是否使用浏览器默认滚动条 | | dots | boolean | true | 是否显示面板指示点 | | sectionClassName | string | hlui-fullpage-section | 组件 Section 元素 classname | | anchors | string[] | - | 对应 section 列表元素的锚点名称列表 | | activeClass | string | active | 当前正在显示的 Section 的 classname | | sectionPaddingTop | string | number | 0 | Section 元素的上边距 | | sectionPaddingBottom | string | number | 0 | Section 元素的下边距 | | shortcutKey | boolean | true | 是否支持箭头快捷键 | | touchable | boolean | true | 是否支持 Touch 事件 | | activeSection | number | 0 | 默认显示的 Section 索引 | | dotsAnchorClass | string | - | 面板指示点中锚点的 classname | | dotsClass | string | - | 面板指示点的 classname |

案例

npm start 然后打开 http://localhost:8000/examples/

线上案例: https://hankliu62.github.io/rc-fullpage

单元测试

npm test

覆盖率

npm run coverage

License

@hankliu/rc-fullpage is released under the MIT license.