【项目想法】在线简历制作

想法：

希望打造一款能够在线简历模板，通过后台管理系统配置相关JSON数据，即可生成一套美观程序员简历。感兴趣的可以给个关注，后期上线后可以开放第一时间知会

计划进程：

开发模板，优先支持移动端样式布局
支持后台管理系统配置简历内容
模板支持PC端样式布局兼容
扩展模板+扩展配置内容+后台管理系统能够预览在线简历效果
通过配置生成，直接对外提供在线简历资源包，让用户能够轻松部署完成自己的在线简历

技术栈：

Taro+React绘制模板

Vue+Element后台管理系统

实现进程：

1. 组件实现FullPage效果

实现时间：2025/06/14

js 复制代码

import { View } from '@tarojs/components';
import { useRef, useEffect, useState } from 'react';
import style from './index.module.scss';

interface PropsType {
  className?: string;                // 外部传入的自定义 className，用于样式扩展
  children: React.ReactNode[];      // 子元素，每个视图为一个全屏页面
}

export default (props: PropsType) => {
  const { className, children } = props;

  const [pageIndex, setPageIndex] = useState(0);      // 当前页索引
  const wrapperRef = useRef<HTMLDivElement>(null);    // 滚动容器引用
  const isScrolling = useRef(false);                  // 滚动锁，用于节流处理防止频繁滚动

  /**
   * 根据索引滚动到对应页面
   * @param index 要滚动到的页面索引
   */
  const scrollToPage = (index: number) => {
    if (!wrapperRef.current) return;

    const offset = index * window.innerHeight;
    wrapperRef.current.style.transform = `translateY(-${offset}px)`;  // 通过 Y 轴平移实现翻页
  };

  /**
   * 鼠标滚轮事件处理函数（仅适用于 H5 端）
   */
  const handleWheel = (e: WheelEvent) => {
    if (isScrolling.current) return;

    // 启用节流，防止滚动过快
    isScrolling.current = true;
    setTimeout(() => {
      isScrolling.current = false;
    }, 800); // 与动画时长匹配

    // 根据滚轮方向切换页面
    if (e.deltaY > 0 && pageIndex < children.length - 1) {
      setPageIndex(prev => prev + 1); // 向下滚
    } else if (e.deltaY < 0 && pageIndex > 0) {
      setPageIndex(prev => prev - 1); // 向上滚
    }
  };

  /**
   * 页面索引更新时执行滚动
   */
  useEffect(() => {
    scrollToPage(pageIndex);
  }, [pageIndex]);

  /**
   * 组件挂载时绑定滚轮事件监听器
   * 卸载时移除监听器以避免内存泄漏
   */
  useEffect(() => {
    window.addEventListener('wheel', handleWheel, { passive: true });
    return () => window.removeEventListener('wheel', handleWheel);
  }, [pageIndex]);

  return (
    <View className={`${style['full-page-box']} ${className || ''}`}>
      <View className={style['full-page-wrapper']} ref={wrapperRef}>
        {children.map((child, idx) => (
          <View key={idx} className={style['full-page-item']}>
            {child}
          </View>
        ))}
      </View>
      {/* 最后一页不展示 */}
      {pageIndex < children.length - 1 && (
        <View className={style['top-arrow']}></View>
      )}
    </View>
  );
};