最稳妥方案是用 position: fixed 实现底部购物车按钮，需设 bottom: 0、left: 0、right: 0、z-index: 1000，适配安全区用 env(safe-area-inset-bottom)，JS 绑定需防重复提交并同步库存状态。
底部栏固定显示购物车按钮的 CSS 实现
直接用 position: fixed 最稳妥，但必须避开移动端键盘遮挡和 iOS Safari 底部导航栏干扰。别用 position: sticky 做底部按钮——它在多数安卓浏览器里不触发，iOS 上也容易失效。
关键点：
-
bottom: 0要配合left: 0和right: 0，否则按钮可能只占半屏宽度 - 必须加
z-index: 1000（或更高），否则会被弹窗、地图组件等盖住 - 移动端建议设
height: 60px，太矮手指难点，太高又挤内容 - 避免用
vh单位做高度，Safari 在键盘弹出时会错误重算视口高度，导致按钮上跳
按钮点击后不跳转、只加购物车的 JS 绑定
别直接写 <a href="cart.html">——用户点完还得返回，体验断层。用 JS 阻止默认行为，调真实接口或本地缓存。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 没加
event.preventDefault()，点一下页面刷新或跳转 - 用
onclick="addToCart()"写在 HTML 里，后续维护难，且无法统一拦截重复点击 - 没禁用按钮点击状态，用户狂点导致重复提交
推荐写法：
const cartBtn = document.querySelector('#add-to-cart-btn');
cartBtn.addEventListener('click', async function(e) {
e.preventDefault();
this.disabled = true;
this.textContent = '添加中...';
try {
await fetch('/api/cart', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ sku: 'PROD-123', qty: 1 })
});
alert('已加入购物车');
} catch (err) {
alert('添加失败，请重试');
} finally {
this.disabled = false;
this.textContent = '加入购物车';
}
});
适配 iOS 底部安全区与微信内置浏览器
iOS 15+ 和微信 8.0.30+ 默认把底部按钮压在「小黑条」下面，用户根本点不到。必须显式处理 env(safe-area-inset-bottom)。
实操方案：
- 给按钮容器加
padding-bottom: env(safe-area-inset-bottom) - 按钮本身用
margin-bottom: env(safe-area-inset-bottom)更可靠（避免 padding 影响点击热区） - 微信里还要检测
isWechat，某些旧版本不支持env()，得 fallback 到60px - 别依赖
@supports (padding-bottom: env(safe-area-inset-bottom))做判断——微信 WebView 的 @supports 实现有 Bug，会误判
按钮状态要随商品库存实时变化
静态按钮写着「加入购物车」但商品已售罄，用户点完才提示「库存不足」，属于体验倒退。必须服务端返回库存状态，前端同步更新按钮文案和禁用态。
典型场景：
- 库存为 0 → 按钮文字改为「缺货」，
disabled=true，背景置灰 - 库存
- SKU 变更（如选了不同颜色）→ 必须重新请求该 SKU 的库存，不能复用上一个
- 不要用定时轮询查库存，用服务端推送（如 SSE）或下单前一刻校验更省资源
最常被忽略的是：按钮状态变更后，没同步更新 aria-disabled 和 aria-label，对屏幕阅读器用户不友好。
