课堂笔记｜电商商品详情页原型开发实战

课程主题：电商Web原型 - 商品详情页结构与交互实现
一、页面结构拆解（从设计图到代码骨架）

老师给的原型图是典型的电商商品详情页，核心模块：

• 顶部导航（商城Logo、分类、搜索、购物车）

• 面包屑（首页→餐厨→当前商品）

• 商品主区域（左侧图册+右侧信息）

• 同类商品推荐（横向滚动）

• 商品详情/评价Tabs

• 热销推荐（侧边栏）

• 常见问题+客户服务

二、课堂上的「快速实现」策略（20分钟版）

老师说：原型要「快、准、简」，别纠结细节，先跑通结构+核心交互。

1. 布局骨架（HTML）

用「容器+Flex」快速拆分区域：

导航栏

首页 / 餐厨 / 趣味粉彩陶瓷马克杯

图册（缩略图+主图）

标题、价格、服务、规格、按钮

横向滚动列表

...

...

热销推荐

常见问题

客户服务

2. 核心交互（JS精简版）

老师说：交互要「能演示」就行，别搞复杂逻辑。

• 图册切换：点击缩略图，主图换背景色（模拟图片）

• 数量加减：限制最小1，只读输入框

• Tabs切换：显示/隐藏对应内容

// 图册切换
function switchImg(idx) {
const main = document.getElementById('mainImg');
main.style.background = ['#eee', '#ddd', '#ccc'][idx]; // 模拟不同图
// 缩略图高亮
document.querySelectorAll('.thumb').forEach((t, i) => {
t.classList.toggle('active', i === idx);
});
}

// 数量加减
function changeQty(delta) {
const input = document.getElementById('qty');
let val = parseInt(input.value) + delta;
if (val < 1) val = 1;
input.value = val;
}

// Tabs切换
function switchTab(tabName) {
document.getElementById('detail').style.display = tabName === 'detail' ? 'block' : 'none';
document.getElementById('review').style.display = tabName === 'review' ? 'block' : 'none';
// 标签高亮
document.querySelectorAll('.tab').forEach((t, i) => {
t.classList.toggle('active', (tabName === 'detail' ? i === 0 : i === 1));
});
}

3. 样式取舍（CSS）

老师说：原型阶段，样式「能看、对齐、不丑」就行，别写响应式/动画。

• 颜色：品牌红（#e53935）做强调，灰/白做底色

• 布局：flex 快速分栏，间距用 gap/margin

• 细节：按钮 hover、边框、字体大小统一

.product {
display: flex;
gap: 20px;
}
.gallery {
display: flex;
gap: 10px;
}
.thumb {
width: 50px;
height: 50px;
background: #eee;
border: 2px solid transparent;
cursor: pointer;
}
.thumb.active { border-color: #e53935; }
.info h1 { font-size: 17px; margin: 0 0 8px; }
.price { color: #e53935; font-size: 20px; }
.btn { padding: 8px 14px; border: none; cursor: pointer; }
.buy { background: #e53935; color: #fff; }
.cart { background: #fff; color: #e53935; border: 1px solid #e53935; }

三、课堂「踩坑」与老师点拨

1. 「想写太全」→ 老师说：原型是「验证思路」，不是「上线产品」

一开始我想加轮播、SKU联动、购物车状态… 老师说：「20分钟先跑通结构，复杂逻辑面试时再讲。」

2. 「图片用什么？」→ 老师说：用SVG占位或纯色块

真实项目用 + 懒加载，但原型阶段「模拟视觉」就行，别花时间找图。

3. 「响应式？」→ 老师说：原型阶段先保证PC端对齐

面试时说「移动端用媒体查询堆叠布局」即可，不用现场写。