react不到一百行代码写了个pc端超简单全屏滚动fullpage

最新推荐文章于 2024-09-10 09:00:22 发布

Combarbala

最新推荐文章于 2024-09-10 09:00:22 发布

阅读量1.4k

点赞数 2

分类专栏： fullpage 全屏滚动文章标签： react js

本文链接：https://blog.csdn.net/Combarlala/article/details/107536859

版权

刚接触react，边看文档边动手，写了个简单的pc端全屏滚动，只支持竖屏滚动，带小圆点（nav）

fullpage.jsx文件

import React from "react";
import "./fullpage.less";
import {
    throttle } from "utils/loadash";

class Fullpage extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      currentPage: 1,
      pageList: this.props.children,
    };

    this.initPageListFromPropsChildren(); // 类似于vue的插槽，props带过来的children（FullpageItem）
    this.handleScroll = throttle(this.handleScroll, 600, true); //屏幕滚动时的节流函数
  }
  debounceHandleScroll = (e) => {
   
    e.persist();
    this.handleScroll(e);
  };
  changeCurrentPage(index) {
   
    this.setState({
    currentPage: index });
  }
  handleScroll(e) {
   
    if (e.deltaY > 0) {
   
      if (this.state.currentPage === this.state.pageList.length) return;
      this.changeCurrentPage(