Wenli Zhang‘s CV 的 pagePiling.js 完全教程：翻页滚动、左侧导航与底部循环-平芜编程栈

Wenli Zhang's CV 的 pagePiling.js 完全教程：翻页滚动、左侧导航与底部循环

【免费下载链接】cvWenli Zhang's CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv

"Wenli Zhang's CV" 是一个用pagePiling.js插件打造的整屏翻页简历网页：仅用 30 行左右的 JS，就实现了翻页滚动、左侧导航和底部循环三大效果。本教程带你逐段读懂这套实现，新手也能照着自己搭出同款翻页页面 🚀

为什么简历要做成"翻页式"

这份简历把个人介绍、项目、技能、教育、实习、现职、联系 7 大块内容，做成了 7 个整屏 section。用户滚动鼠标或按方向键时，页面会像幻灯片一样"一次翻一页"，而不是传统网页的连续滚动。这种交互靠的就是 pagePiling.js——一个基于 jQuery 的整屏滚动插件（bower.json中声明的版本为~0.0.7）。

它的结构非常直白：在index.html中，所有 section 都装在一个#pagepiling容器里：

<div id="pagepiling"> <div class="section" id="home">…</div> <div class="section" id="project">…</div> <!-- 共 7 个 .section --> </div>

只要让 pagePiling.js 接管这个容器，翻页效果就自动生效。

最快上手：3 步搭出翻页页面

第 1 步：获取项目代码

git clone https://gitcode.com/gh_mirrors/cv4/cv

第 2 步：安装依赖并构建

项目用 bower 管理第三方库、用 gulp 编译 SCSS。gulpfile.js里的vendor任务会把 pagePiling.js 的 JS 和 CSS 拷贝到vendor/目录，compass任务则把scss/下的样式编译到css/目录。装好 Node.js 和 gulp 后在项目目录运行gulp即可。

第 3 步：初始化插件

核心逻辑全部在js/index.js里，去掉移动端判断后只有十几行：

$('#pagepiling').pagepiling({ loopBottom: true, navigation: { 'position': 'left', 'tooltips': isCn ? cn : en }, onLeave: function(index, nextIndex, direction) { // 翻页时给其他页面加上 leaving 样式 } });

就这 3 个配置项，对应标题里的三大效果，下面逐一拆解。

翻页滚动：一次一页的丝滑切换

pagePiling.js 默认接管了鼠标滚轮、触摸滑动和键盘方向键，section 之间的位移动画由它内置的 CSS 完成。本项目的"丝滑感"还多了一味调料：在scss/_base.global.scss中，每个.section都设置了transition: 0.5s，翻页结束后有 0.5 秒的平滑过渡。

onLeave回调则负责"变色"细节：翻到哪一页，其他所有页面就加上leaving类，背景从主色切换到对比色，让当前页在视觉上"浮"出来：

.section { &.leaving { background-color: $clr-contrast; } }

还有一个防闪烁小技巧：初始化前给所有 section 加上initing类（display: none），等 pagePiling.js 布局完成后再移除，避免页面加载瞬间看到所有 section 挤在一起的"白屏闪烁"。

左侧导航：一行配置 + 中英文提示

pagePiling.js 的navigation配置会自动在页面一侧生成圆点导航。本项目用两行完成了它：

position: 'left'：把导航圆点固定到左侧；
tooltips：给每个圆点加上悬停提示文字，并且会跟随语言切换——英文页显示['Home', 'Projects', 'Professions', …]，cn.html中文页显示['首页', '项目', '技能', …]，判断逻辑就一句location.href里有没有cn.html。

点击任意圆点即可直达对应 section，这是整屏页面必备的可访问性兜底。

底部循环：看完最后一页还能"回到第一页"

loopBottom: true是最短、也最容易被忽略的一项配置。它让翻页滚动在底部也能循环：在最后一页继续下滑，会回到第一页，形成无缝的循环浏览体验。对简历这种"看完就想从头看一次"的场景非常合适。

移动端降级：不翻页，优雅回退

翻页页面最怕手机上的体验翻车，这个项目做了两层兜底：

JS 层：js/index.js顶部的mobilecheck()通过 UA 正则检测移动设备，命中后直接跳过 pagePiling 初始化，给<html>加上mobile类，页面退化为普通滚动布局；
CSS 层：scss/_mobile.settings.scss为移动端单独缩小字号、调整头像与间距；scss/_components.columns.scss则在 760px 以下屏幕直接display: none隐藏#pp-nav左侧导航圆点。

这一"JS 检测 + CSS 媒体查询"的组合，是所有整屏翻页项目都该抄的作业。

小结：3 个配置项撑起一个翻页页面

配置	作用	所在文件
`loopBottom: true`	底部循环滚动	`js/index.js`
`navigation: { position: 'left' }`	左侧圆点导航	`js/index.js`
`onLeave`回调	翻页联动变色	`js/index.js`+`scss/_base.global.scss`