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

想法:

希望打造一款能够在线简历模板,通过后台管理系统配置相关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>
  );
};
相关推荐
十里青山3 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45312 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^13 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人21 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊8 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖9 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js