N6 APP
项目描述:基于公司n6应用程序开发的一款手机app,项目包括工作台做单,审批单据,报表等模块。
技术要点:
一、虚拟滚动列表组件开发
1.动态数据加载,实现了无限滚动功能,在用户接近列表底部时自动加载更多数据,减少初始加载时间。
2.虚拟化渲染,通过计算可视化区域内的项,采用绝对定位的方式有效减少DOM元素的数量,显著提升滚动性能。
3.加载指示器,为用户提供加载状态反馈,提升交互体验。
4.通过控制可见项的数量和高效的数据切片操作,使组件在处理数千条数据使依然保持流畅的用户体验。页面加载速度由原来的3-4秒提升到1秒以内。
二、组件化开发
1.模块化结构,项目中有较多的表单,将表单封装成独立的组件,提高了代码的复用率
2.使用插槽,通过插槽机制,允许父组件传入自定义内容,使组件更加灵活,例如,表单组件可以接受不同的输入类型。
3.状态管理,使用Pinia管理状态,将全局状态与组件逻辑分离,减少组件间的耦合,提高可维护性。
三、页面加载优化
1.通过 Vue Router 的动态导入功能,按需加载不同页面组件,显著提高了应用的启动速度和页面切换体验,确保用户在导航时能够快速访问所需内容,减少了不必要的加载时间。
2.通过图片懒加载,减少初始加载时间,提高页面响应速度,提高页面流畅度,使工作台页面的加载时间,由原来的2-3秒,提高到1秒以内加载完成。