data-page应仅存当前页码且需动态更新，每次加载后用JavaScript设container.dataset.page = curr + 1；勿存布尔状态或总页数，应另用data-has-more等属性；多容器须独立管理；DOM面板不实时显示dataset变化，需用console验证。
data-page 属性怎么存当前页码
直接写 data-page="1" 是错的——它只是个静态快照，滚动加载时页码会变，但属性值不会自动更新。必须在每次成功加载新数据后，用 JavaScript 主动更新这个属性。
常见错误是只在初始化时设一次：container.setAttribute('data-page', '1')，后续加载第 2 页、第 3 页，data-page 还卡在 1，导致重试或状态混乱。
- 每次请求前，先读取当前值：
const curr = parseInt(container.dataset.page) || 1 - 请求成功后，立即更新：
container.dataset.page = curr + 1 - 如果接口返回的是游标（如
next_cursor），别硬套data-page，改用data-cursor更准确
为什么不用 data-page 存总页数或是否到底
data-page 语义上只表示“当前已加载到第几页”，不是状态开关。把 is_last_page: true 或 has_more: false 塞进 data-page 里，会导致类型混淆、解析出错，而且违反 HTML5 data-* 的设计本意：它只存数据，不存布尔状态。
正确做法是另起一个属性，比如：data-has-more="false" 或 data-ended="true"，读取时用 container.dataset.hasMore === 'false' 判断。
立即学习“前端免费学习笔记（深入）”；
- 避免用
data-page="end"这类字符串伪装布尔值，parseInt("end")会得NaN，后续计算崩 - 服务端返回
is_last_page: true后，立刻设container.dataset.hasMore = 'false'，并在滚动监听里加守卫：if (container.dataset.hasMore !== 'true') return
data-* 属性在多容器滚动加载中怎么隔离
一个页面有多个列表（比如“推荐”“历史”“收藏”tab），共用同一个 data-page 就会串页——切到“收藏”加载第 2 页，再切回“推荐”，dataset.page 已经是 2，直接跳过第 1 页。
必须为每个容器单独管理状态，不能靠全局变量或共享属性。
- 每个列表容器加唯一标识：
<div id="recommend-list" data-page="1" data-has-more="true"> - 事件监听绑定到具体容器，而不是
window：recommendList.addEventListener('scroll', handleScroll) - 加载函数内始终从当前容器取值：
const list = event.currentTarget; const page = list.dataset.page
data-page 更新后，DOM 检查不到？
浏览器开发者工具里看不到实时变化，是因为 DevTools 默认只显示初始 HTML 中写的属性，不刷新 dataset 的运行时值。这不是 bug，是正常行为。
验证是否更新成功，别靠眼睛看 Elements 面板，改用控制台执行：document.querySelector('#my-list').dataset.page。
- 如果返回
undefined，说明属性名写错了（比如写了data-Page，实际应全小写data-page） - 如果返回字符串
"1"但后续计算出错，检查有没有漏掉parseInt()，JS 字符串比较"2" > "10"是true - 移动端 iOS Safari 下，某些场景下
dataset更新延迟，可加setTimeout(() => { /* 再读一次 */ }, 0)规避（极少见，仅当真遇到时才加）
真正容易被忽略的点是：data-* 属性只适合存轻量元数据，比如页码、游标、ID；它不替代状态管理。一旦逻辑变复杂（比如要支持取消加载、缓存响应、多步回滚），就得升级到 Map 或局部对象，而不是往 DOM 上堆更多 data-。
