JavaScript分页实现合集（10种写法）

分页的 10 种写法，几乎覆盖了你在项目中遇到的各种场景。不管你是用原生 JS 写点轻巧的功能，还是用 Vue、React 搭建复杂应用，这里都有能直接上手的方案。嗯，像infinite-scroll.js这种懒加载的就适合内容流网站，用户体验也好。

基础 HTML+CSS+JS 的分页，结构最清楚，逻辑也简单。用document.createElement生成分页元素，配合点击事件更新数据，练手合适。

jQuery 的分页插件还是挺方便的，像jQuery Pagination和jQuery.easyPage，配置下页数、每页条数，基本就能用了。适合老项目或者轻量页面。

Bootstrap 分页，样式一贯的整齐，直接套在页面上就挺好看，像bootstrap-paginator.js搭配使用，省事不少。

纯 CSS 动画分页看着酷，像pagination.css这类，翻页有动画过渡。但要注意，还是得靠 JS 控制当前页，不然切不过去。

无限滚动这种就比较现代了。像infinite-scroll.js，适合资讯流、评论区、图文列表那类。滚到页底再加载，页面干净，响应也快。

Vue 的分页组件蛮灵活的，像vue-paginate或者vue-bootstrap-pagination，支持 props 配置，也能直接拿来封装，状态管理也清楚。

React 分页推荐用react-paginate，样式和交互都能自定义，适合项目定制化强的场景。JSX 写起来也直观，翻页逻辑自己控制。

Angular 分页用ngx-pagination会省不少事，绑定到模板里，自动分页计算。团队用 Angular 的话，直接引就行。

PWA 的分页可以结合workbox来离线缓存，用sw-precache预加载数据，让用户在离线状态也能翻页。这招在移动端蛮实用的。

服务端渲染分页更适合数据量大的页面，像用express-paginate在 Node.js 里分页逻辑。前端只负责展示，首屏加载快，SEO 也友好。

分页的玩法不少，关键还是要看你的项目类型和需求。要交互强就用前端组件，要性能稳就放服务端。如果你做的是响应式页面或内容流平台，不妨多试试懒加载。