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

想法:

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

计划进程:

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

技术栈:

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>
  );
};
相关推荐
PAK向日葵5 小时前
【算法导论】如何攻克一道Hard难度的LeetCode题?以「寻找两个正序数组的中位数」为例
c++·算法·面试
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端