移动端商详页纯前端实战：SKU联动、轮播、懒加载与加购动画

简介：“仿京东的商品展示详情页面”是一份面向前端初学者与商城项目开发者的实战型页面源码，可用于学习电商商品详情页的布局、样式与交互实现，并快速集成到个人商城项目中做个性化修改。压缩包共44个文件，约398KB，以31个png、5个gif、2个jpg等图片素材为主，配套2个JavaScript脚本、1个HTML页面、1个CSS样式表和说明文件，便于直接查看页面结构与资源组织方式。该资源已有4707人学习下载，具备一定参考热度。读者可从中了解商品主图轮播、规格选择、价格与库存联动、评价列表展示、购物车按钮交互及响应式布局等常见模块的实现思路，也能借鉴jQuery插件与图片懒加载的用法，适合作为前端页面练习与课程设计参考。

1. 一屏商详页的交付现场：这份资源替你省掉了哪些活

上周有人问我，接一个在微信里打开的商品详情页私活，预算不高、工期五天，能不能不用框架做完。这个需求太典型了：前端页面就一屏，但轮播、规格联动、加购动画、长图懒加载一项都不能少，缺一个就显得假。这份仿头部电商平台的商品详情页资源，做的就是把这屏从骨架到交互完整搭一遍，纯前端实现，拿到手能直接跑起来看效果。它适合三类人：刚学完 CSS 想找个像样页面练手的新手、接了商详页外包要快速交付的开发者、以及想搞清楚 SKU 联动这类经典交互到底该怎么写的老手。下面按目录结构、核心模块、跑起来的命令、容易出错的地方依次拆开。

2. 技术选型与目录结构：为什么不上框架，一套静态包怎么撑住整页交互

拿到一份前端资源，我第一件事不是跑，而是先看package.json和目录树——依赖列表基本能暴露作者的取舍。这套商详页的选型很克制：运行时不依赖任何框架，构建层只挂了 Vite，样式用原生 CSS 加变量，交互全部由几个几十行的 ES module 各自负责。这个组合不是为了炫技，是把「改起来成本低」放在第一位。

2.1 技术栈判断：路由、状态、首屏三笔账

要不要上框架，我一向看三个数：页面有几个路由、状态要跨几层、首屏 JS 的预算是多少。商详页只有一个路由，状态也就三份——当前选中的规格组合、购物车角标数字、轮播当前索引，全都是单页内的局部状态，没有任何跨页共享。这种情况下框架带来的组件复用和响应式更新收益很小，反而要额外背一份运行时体积，商详页对首屏时间又特别敏感，账算下来不划算。

但「不用框架」不等于「裸写一个 HTML 文件」。常见的失控写法是把三千行写进一个 index.html，CSS 和 JS 全内联，改一个颜色要全局搜。这套资源保留了工程化的底线：Vite 负责开发服务器和打包，ES module 把轮播、规格、加购、吸顶、懒加载拆成独立文件，每个文件对外只暴露一个函数，main.js负责装配。CSS 统一用g-前缀加类 BEM 命名，避免和后续接入的第三方样式撞车。

补充一句公道话：如果这个页面之后还要接商品列表、购物车、订单这些页面，那 Vue3 加组件库会更划算，这套资源的价值就退化成一份视觉稿和高保真结构参考。选原生，图的就是「打开就能读懂每一行、改起来不用先理解一套框架约定」。

2.2 目录结构：每个文件到底管什么

detail-page/ ├─ index.html # 唯一入口，页面骨架全在这 ├─ vite.config.js # 开发服务器 / 代理 / 构建配置 ├─ package.json └─ src/ ├─ main.js # 装配层：取数据 → 渲染 → 绑事件 ├─ styles/ │ ├─ reset.css # 清默认样式与移动端点击高亮 │ ├─ detail.css # 骨架、区块间距、底部固定栏 │ └─ sku.css # 规格弹层与选中态 ├─ modules/ │ ├─ banner.js # 轮播（触摸滑动 + 自动播放 + 首尾循环） │ ├─ sku.js # 规格联动与可选性判定 │ ├─ cart.js # 加购动画与角标同步 │ ├─ sticky.js # 吸顶导航与锚点高亮 │ └─ lazy.js # 详情长图懒加载 ├─ utils/ │ ├─ dom.js # $ / $$ / 事件委托封装 │ └─ rem.js # 视口适配 └─ mock/ └─ detail.json # 一份完整商品数据，字段与真实接口对齐

这张表的意义在于：接手一个陌生前端包，先判断「我要改的东西落在哪一层」。换数据只动mock，换皮只动styles，加交互才动modules——三层的边界清楚，才不会改一处崩三处。

2.3 跑起来：三条命令和一份代理配置

# 安装依赖，只有 vite 一个开发依赖 npm install # 本地起服务，默认 http://localhost:5173 npm run dev # 真机调试：把服务暴露到局域网，手机连同一个 WiFi 访问终端打印的 IP npm run dev -- --host # 打包并本地预览产物，验证 base 配的相对路径是否生效 npm run build && npm run preview

--host这个参数值得单独说。移动端页面在桌面浏览器里缩到 375px 看，很多问题根本暴露不出来——100vh的差异、安全区、触摸手势的方向锁，全要真机才现形。加了--host，手机浏览器直接开终端打印的那个内网地址就行，热更新一样生效。

联调阶段还需要一份代理配置，把/api转发到后端，这样前端代码里写的请求路径不用跟着环境变：

// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ // 产物用相对路径，dist 丢到任意子目录都能打开 base: './', server: { host: '0.0.0.0', // 真机调试时手机可通过局域网 IP 访问 port: 5173, proxy: { // 前端一律请求 /api/xxx，避免跨域，也避免在代码里写死后端地址 '/api': { target: 'http://127.0.0.1:8080', changeOrigin: true } } }, build: { outDir: 'dist', // 8KB 以下的小图直接内联成 base64，少几次请求 assetsInlineLimit: 8192 } })

base: './'是血泪经验：默认打包出来是/assets/xxx.js这种绝对路径，一旦部署到二级目录（比如/activity/detail/）就整页白屏。改相对路径后，丢哪里都能跑。changeOrigin: true会改写请求头的 Host，后端做域名校验时必须开。

3. 骨架与适配：从头部到详情长图，七个区块怎么分层落地

商详页的结构其实是高度标准化的，难的不是排版，而是让「滚动顺序、锚点导航、懒加载触发区」三者对齐。这套资源把页面切成七个区块，每个区块给一个id，导航高亮、懒加载、滚动定位全都复用这套id，改结构时只需要动一处。

3.1 HTML 骨架：区块顺序就是用户浏览顺序

<!-- index.html 骨架：区块顺序 = 浏览顺序 = 锚点顺序 --> <main class="page"> <header class="g-header" id="sec-top">导航栏 + 分享 / 返回</header> <!-- 1. 轮播图，首屏视觉重心 --> <section class="g-banner" id="sec-banner"> <div class="banner-track"></div> <div class="banner-dots"></div> </section> <!-- 2. 价格区：现价 / 原价 / 促销标签 --> <section class="g-price" id="sec-price"></section> <!-- 3. 规格入口：默认只显示已选摘要，点击才起弹层 --> <section class="g-sku-entry" id="sec-sku"></section> <!-- 4. 评价摘要：只放两三条，完整评价另起弹层 --> <section class="g-comment" id="sec-comment"></section> <!-- 5. 图文详情：长图区，懒加载重点 --> <section class="g-detail" id="sec-detail"></section> <!-- 6. 底部固定操作栏：客服 / 购物车 / 加入购物车 / 立即购买 --> <footer class="g-bar"> <button class="btn-cart" id="btnAddCart">加入购物车</button> </footer> </main>

这套骨架的关键在于把「视觉模块」和「滚动锚点」用同一批id绑死。轮播、价格区、规格入口各有自己的id，吸顶导航的数据源直接读这几个id，不用再维护一份映射表。代价是改结构时id不能随便改名——这是我踩过的坑，改完发现导航不高亮了，排查半天才想起来。

3.2 视口适配：vw 换算 rem，1px 边框单独处理

移动端适配这套资源用的是「750 设计稿 + 1rem = 100px」的经典方案，好处是拿到设计稿后数值除以 100 就能直接用，心算得过来。

// utils/rem.js —— 以 750 设计稿为基准，1rem = 100px 设计稿尺寸 const DESIGN_WIDTH = 750 const BASE = 100 function setRootFontSize () { // 用 clientWidth 而不是 innerWidth，避开滚动条宽度带来的误差 // 上限锁死 750，防止平板 / 折叠屏上字号被放大到离谱 const w = Math.min(document.documentElement.clientWidth, DESIGN_WIDTH) document.documentElement.style.fontSize = (w / DESIGN_WIDTH) * BASE + 'px' } setRootFontSize() // 只在横竖屏切换这类尺寸跳变时重算，滚动过程中不触发，避免抖动 window.addEventListener('orientationchange', () => { setTimeout(setRootFontSize, 300) })

这里有两个参数值得说明。DESIGN_WIDTH必须和设计稿宽度一致，改成 640 或 375 后所有 rem 数值都要重算，别只改一半。Math.min的上限锁死是关键，不锁的话在 iPad 上1rem会算成 140px 以上，整个页面像被放大镜照过。

1px 边框是移动端的经典难题，dpr=2 或 3 的屏幕上，border: 1px会渲染成 2 到 3 个物理像素，看起来比设计稿粗一圈，不少人会误以为是设计稿标注错了：

/* 用伪元素 + scaleY，1 个 CSS 像素缩放成 0.5 个物理像素级别 */ .hairline-bottom { position: relative; } .hairline-bottom::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e5e5e5; transform: scaleY(0.5); /* dpr=3 的机型可以调成 0.33 */ transform-origin: 0 100%; /* 缩放基准贴底，避免线飘到中间 */ }

transform-origin这行容易漏。默认是元素中心，scaleY之后那条线会浮到容器中间，看着像多了一条分割线。

3.3 轮播与吸顶导航：两个必须自己写的交互

轮播用的是「首尾各克隆一张」的循环方案，滑到克隆图时瞬时跳回真图，用户感知不到边界。核心难点在触摸手势：纵向滚动和横向滑图要区分开，否则用户上下滑页面时会误触下一张。

// modules/banner.js —— 触摸滑动 + 自动播放 + 首尾无缝循环 export function createBanner (root, list, { autoPlay = 3000 } = {}) { const track = root.querySelector('.banner-track') const dots = root.querySelector('.banner-dots') const total = list.length let index = 0 let startX = 0, startY = 0 let locked = null // 'x' | 'y' 方向锁，锁定后本次手势不再改判 let animating = false let timer = null // 首尾各克隆一张，滑到边界时不需要写一堆 if 判断 const loop = [list[total - 1], ...list, list[0]] track.innerHTML = loop.map(src => `<div class="banner-item"><img src="${src}" alt=""></div>`).join('') track.style.width = `${loop.length * 100}%` dots.innerHTML = list.map((_, i) => `<i class="${i === 0 ? 'on' : ''}"></i>`).join('') function moveTo (i, animate = true) { track.style.transition = animate ? 'transform .3s ease-out' : 'none' // 位移百分比相对 track 自身宽度，所以要除以 item 总数 track.style.transform = `translate3d(${-(i + 1) * (100 / loop.length)}%, 0, 0)` dots.querySelectorAll('i').forEach((d, k) => d.classList.toggle('on', k === (i + total) % total)) } root.addEventListener('touchstart', e => { if (animating) return startX = e.touches[0].clientX startY = e.touches[0].clientY locked = null clearInterval(timer) }, { passive: true }) root.addEventListener('touchmove', e => { const dx = e.touches[0].clientX - startX const dy = e.touches[0].clientY - startY // 首次移动超过 8px 才判定方向，太灵敏会把手抖当成滑图 if (!locked && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) { locked = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y' } if (locked === 'x') moveTo(index + (dx < 0 ? 1 : -1), false) }, { passive: true }) root.addEventListener('touchend', e => { const dx = e.changedTouches[0].clientX - startX if (locked === 'x' && Math.abs(dx) > 40) { // 40px 阈值，低于它视为误触 index += dx < 0 ? 1 : -1 } animating = true moveTo(index) startAuto() }) // 滑到克隆图后瞬时跳回真图，transitionend 里做位次校正 track.addEventListener('transitionend', () => { animating = false if (index < 0) { index = total - 1; moveTo(index, false); void track.offsetWidth } if (index > total - 1) { index = 0; moveTo(index, false); void track.offsetWidth } }) function startAuto () { clearInterval(timer) if (total <= 1) return timer = setInterval(() => { index += 1; moveTo(index) }, autoPlay) } moveTo(0, false) startAuto() }

locked这个方向锁是整套轮播里最关键的十来行。没有它，用户在轮播区上下滑页面时，touchmove里的横向位移判断会误触发翻页。40的滑动阈值和8的方向判定阈值都跟手感直接相关，太大显得迟钝，太小容易误触。void track.offsetWidth这一句是强制重排，让浏览器立刻应用transition: none的位置，否则连续两次改样式会被合并成一次，跳转动画就出来了。

吸顶导航用的是IntersectionObserver，不用监听scroll自己算偏移，省掉了节流那一套：

// modules/sticky.js —— 滚动时高亮当前区块对应的锚点 export function initSticky (navSelector, sectionSelector) { const navItems = [...document.querySelectorAll(navSelector)] const sections = [...document.querySelectorAll(sectionSelector)] const io = new IntersectionObserver(entries => { entries.forEach(entry => { if (!entry.isIntersecting) return const id = entry.target.id navItems.forEach(el => el.classList.toggle('on', el.dataset.target === id)) }) }, { // 顶部扣掉吸顶导航高度，底部收掉 70%，让「刚露头」的区块才算当前 rootMargin: '-44px 0px -70% 0px', threshold: 0 }) sections.forEach(s => io.observe(s)) }

rootMargin的四个值顺序是「上右下左」，-44px对应吸顶导航的高度。这个值改错了，导航高亮会永远慢一个区块，看着像卡住了。

4. SKU 联动与加购链路：规格选择这块最容易写乱的地方

商详页里最容易写崩的不是样式，是规格选择。用户点了「冰川白」，哪些版本还能选、哪些要灰掉、主图和价格跟着怎么变——这套联动如果一开始数据结构没设计好，后面会陷入无穷的补丁。

4.1 数据结构：把组合摊平成数组，别用嵌套树

{ "goodsId": "G10086", "specs": [ { "name": "颜色", "values": ["曜石黑", "冰川白", "暮光紫"] }, { "name": "版本", "values": ["8+128", "12+256"] } ], "skus": [ { "id": "S1", "attrs": { "颜色": "曜石黑", "版本": "8+128" }, "price": 2999, "stock": 12, "img": "s1.jpg" }, { "id": "S2", "attrs": { "颜色": "曜石黑", "版本": "12+256" }, "price": 3499, "stock": 0, "img": "s2.jpg" }, { "id": "S3", "attrs": { "颜色": "冰川白", "版本": "8+128" }, "price": 2999, "stock": 7, "img": "s3.jpg" }, { "id": "S4", "attrs": { "颜色": "冰川白", "版本": "12+256" }, "price": 3499, "stock": 3, "img": "s4.jpg" } ], "detailImgs": ["d1.webp", "d2.webp"] }

有人喜欢把 SKU 组织成「颜色 → 版本 → 具体货品」的嵌套树，写起来直观，但一旦要判断「跨组组合是否可用」就得递归遍历，而且规格组增减时整棵树要重建。摊平成skus数组后，任何判定都退化成一次数组遍历，加一个规格组只需要往specs里塞一项，判定逻辑一行不用改。

specs和skus是两份数据，前者管展示顺序和可选项，后者管价格库存。这两份数据的同步维护是后端的事，前端不要自作聪明去从skus反推specs——反推出来的顺序是乱的。

4.2 可选性判定：一个函数解决灰化

// modules/sku.js /** * 判断某个候选项在当前已选条件下是否可点 * @param {Array} skus 扁平的 SKU 列表 * @param {Object} selected 当前已选，如 { 颜色: '曜石黑' } * @param {Object} candidate 待判定的候选，如 { name: '版本', value: '12+256' } * @returns {boolean} */ export function isSelectable (skus, selected, candidate) { // 判定某一组时，先把它自己那一组的旧选择摘掉， // 否则「从曜石黑切到冰川白」这条路径永远算不出来 const rest = { ...selected } delete rest[candidate.name] const merged = { ...rest, [candidate.name]: candidate.value } return skus.some(sku => { if (sku.stock <= 0) return false // 无货直接排除 return Object.entries(merged).every(([k, v]) => sku.attrs[k] === v) }) }

delete rest[candidate.name]这一行是整个函数的核心。刚开始写的时候没删，结果选中「曜石黑 8+128」之后，去点「12+256」永远灰着——因为判定时把「版本 = 12+256」和已选的「版本 = 8+128」叠在一起了，没有任何一个 SKU 能同时满足，自然全灰。这个现象很容易被误判成数据问题，实际是判定条件写错了。

复杂度是O(规格组数 × SKU 数)，一个商品几十个 SKU 的规模下完全够用，不需要做索引优化。但如果你的场景是几百个 SKU 的多规格商品（比如家具定制），可以提前把每个组的可选值集合缓存起来，选中变化时只重算受影响的那几组。

选中之后统一走一次渲染，主图、价格、库存文案、按钮可用性全从命中的那个 SKU 里取，不要在点击事件里零散地改 DOM：

// main.js 片段：选中态变化后统一重渲染 function onSelect (group, value) { selected[group] = selected[group] === value ? undefined : value // 再点一次取消 if (!selected[group]) delete selected[group] const hit = skus.find(sku => Object.entries(selected).every(([k, v]) => sku.attrs[k] === v)) // hit 为空说明组合不存在，保持上一次的价格展示，同时禁用加购 document.querySelector('.g-price .now').textContent = hit ? `¥${hit.price}` : '¥--' document.querySelector('.g-banner img').src = hit ? hit.img : skus[0].img document.getElementById('btnAddCart').disabled = !hit || hit.stock <= 0 renderSkuPanel() // 重算所有候选项的灰化状态 }

selected[group] === value ? undefined : value这个三元是「再点一次取消选择」的常见交互。注意取消之后要delete掉这个 key，留一个undefined值会让Object.entries多出一条空记录，判定时又全灰。

4.3 加购动画：抛物线的起点和终点怎么算

加购的小球动画看着花哨，其实就是一个二次贝塞尔插值，难点全在坐标系。

// modules/cart.js —— 小球从按钮飞向底部购物车角标 export function flyToCart (startEl, endEl, onArrive) { const start = startEl.getBoundingClientRect() const end = endEl.getBoundingClientRect() const ball = document.createElement('i') ball.className = 'cart-ball' // 挂到 body 直接子级，用视口坐标定位； // 父级一旦有 transform，fixed 会被降级成相对该父级定位，球就飞歪了 ball.style.cssText = `position:fixed;left:${start.left + start.width / 2}px;` + `top:${start.top}px;width:12px;height:12px;z-index:9999` document.body.appendChild(ball) // 二次贝塞尔：起点 → 控制点（抬高一点形成抛物感）→ 终点 const ctrl = { x: (start.left + end.left) / 2 - 60, y: Math.min(start.top, end.top) - 120 } const dur = 600 const t0 = performance.now() function frame (now) { const t = Math.min((now - t0) / dur, 1) const mt = 1 - t const x = mt * mt * start.left + 2 * mt * t * ctrl.x + t * t * end.left const y = mt * mt * start.top + 2 * mt * t * ctrl.y + t * t * end.top ball.style.transform = `translate3d(${x - start.left}px, ${y - start.top}px, 0)` if (t < 1) return requestAnimationFrame(frame) ball.remove() onArrive && onArrive() // 角标 +1 并弹一下 } requestAnimationFrame(frame) }

三个参数决定观感：dur = 600是总时长，低于 400 毫秒看不清轨迹，高于 800 毫秒用户会觉得卡；ctrl.x减 60 是把控制点往左推，让轨迹带一点侧向弧度而不是纯粹直上直下；ctrl.y取两个元素的较高者再减 120，保证控制点永远在起点上方，抛物线才是拱起来的。

小球用transform位移而不是直接改left/top，是因为transform走合成层，不触发重排，600 毫秒里要跑三十多帧，改left/top在中低端安卓上会掉帧。

5. 排查清单：五个让我返工的坑，从白屏到飞歪的小球

5.1 底部操作栏被系统栏盖住

现象：iPhone 上底部「加入购物车」按钮被地址栏遮掉一半，要往上滑一下才露出来，安卓机上又正常。

原因：页面容器用了height: 100vh撑满。移动端浏览器的100vh是「含工具栏」的视口高度，跟实际可视区对不上，差值能到 100px 以上。底部栏本身是position: fixed; bottom: 0，又叠了一层安全区。

解决：容器改用100dvh，底部栏补安全区内边距。老机型不支持dvh的话，用 JS 读visualViewport.height写 CSS 变量兜底。

.page { min-height: 100dvh; } .g-bar { position: fixed; left: 0; right: 0; bottom: 0; /* 安全区，iPhone 全面屏底部那条横条的高度 */ padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

5.2 轮播快速滑动后跳回第一张

现象：连着甩几下，图会闪一下回到首图再滑走，慢速滑完全正常。

原因：首尾克隆的循环方案靠transitionend把克隆位瞬时跳回真位。快速滑动时上一次的transitionend还没触发就被新的滑动覆盖，位次和实际位移错开，下一次校正就直接跳回首图。

解决：加一个animating锁，动画期间忽略新的touchstart；transitionend里做位次校正时用transition: none瞬移，再void track.offsetWidth强制重排，让浏览器立刻应用新位置。

track.addEventListener('transitionend', () => { animating = false // 解锁，允许下一次手势 if (index < 0) { index = total - 1; moveTo(index, false); void track.offsetWidth } if (index > total - 1) { index = 0; moveTo(index, false); void track.offsetWidth } })

5.3 换规格后主图不跟着变

现象：点了「冰川白」，价格变了，主图还是上一张黑色的。

原因：主图渲染写在了初始化里，只在页面加载时跑一次；选中态又是用数组下标存的（selected[0] = 1），规格组顺序一调整，下标和值就对不上了。

解决：选中态存「组名 → 值」的映射（{ 颜色: '冰川白' }），每次选中后统一走一次render()，主图、价格、库存文案全部从命中的 SKU 里取，不在点击事件里零散改 DOM。

5.4 详情长图让页面白屏好几秒

现象：滑到图文详情区整屏空白，等一两秒图才出来，低端安卓上还会整页闪一下。

原因：详情区十几张 750×2000 的长图一次性全加载，加起来几十兆。图片也没压缩，容器没给固定高宽比，图片加载完页面高度突变，滚动位置就飞了。

解决：占位加IntersectionObserver懒加载，图片统一转 WebP 并限制宽度不超过 750，容器用aspect-ratio先占好位。

// modules/lazy.js —— 详情长图懒加载 const io = new IntersectionObserver(entries => { entries.forEach(entry => { if (!entry.isIntersecting) return const img = entry.target img.src = img.dataset.src // 真实地址放>/* styles/detail.css 顶部 */ :root { --brand: #e93b3d; /* 主色，按钮和价格都用它 */ --brand-light: #fff1f0; /* 主色浅底，促销标签背景 */ --radius: 8px; --gap: 12px; } .g-price .now { color: var(--brand); } .btn-cart { background: var(--brand); border-radius <p> <a href="https://download.csdn.net/download/qq_37517574/10121689" style="color:#ec7500;font-size:14px;"> 本文还有配套的精品资源，点击获取 </a> <img alt="menu-r.4af5f7ec.gif" src="https://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;"> </p>