layui分页组件移动端适配需强制css重排+js补事件：加width:100%和overflow-x:auto解决溢出；缩窄按钮间距；禁用count/limit区域；扩大热区并处理touch延迟；避免嵌套定位父元素；页码摘要需手动渲染；注意curr参数类型统一。
layui 分页组件在移动端默认样式挤成一团、按钮点不中、页码错位，不是 bug，是它压根没为触控场景设计——得靠 CSS 强制重排 + JS 补事件逻辑。
laypage 容器宽度撑破 viewport 怎么办
移动端浏览器默认把 elem 容器当普通块级元素处理，laypage 内部用 float 和固定宽高布局，小屏下直接溢出，右侧页码看不见。
- 给分页容器加
style="width: 100%; overflow-x: auto;"，让横向滚动只作用于分页区域本身 - 删掉所有自定义
prev/next文本的white-space: nowrap，否则文字不换行，宽度爆炸 - 用媒体查询缩窄按钮间距：
@media (max-width: 768px) { .layui-laypage a, .layui-laypage span { padding: 4px 8px; font-size: 14px; } } - 禁用
layout里的count和limit区域（它们在手机上毫无意义），只保留['prev', 'page', 'next']
点击页码按钮无响应或误触发
laypage 默认绑定 click，但移动端 touch 有 300ms 延迟，且 a 标签热区太小，手指一偏就点空。
- 在初始化前加
document.body.style.webkitTouchCallout = 'none';，防 iOS 长按弹菜单干扰 - 给分页容器加
style="-webkit-tap-highlight-color: transparent;"，去掉点击高亮残留 - 用 CSS 扩大热区：
.layui-laypage a { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } - 不要依赖
jump回调里的event.target判断点击源——laypage 内部会代理，直接用回调参数obj.curr就行
分页跳转后页面闪动或位置跳变
laypage 渲染时会重写容器 innerHTML，如果容器外层有 position: fixed 或 transform，重绘会导致整个区域重排，视觉上像“抖一下”。
- 确保
elem是独立容器，不要嵌套在position: relative/absolute的父元素里 - 避免在分页容器上设
transition或animation，laypage 不触发重绘事件，CSS 动画会卡住 - 如果必须动画，改用
table.reload()触发分页（前提是用了table.render()），它内部用 DOM patch，不会全量重写 -
jump回调里别直接操作document.body.scrollTop，改用element.scrollIntoView({ behavior: 'smooth' })锚定到表格顶部
如何让 laypage 在手机上显示“第 x 页 / 共 y 页”而不是数字列表
laypage 原生不支持卡片式页码摘要，layout 参数只能开关内置区块，不能改结构。
- 放弃
layout: ['page']，改用layout: ['prev', 'next']，把页码信息抽出来单独渲染 - 在
jump回调里手动更新一个外部<div class="page-summary"></div>：document.querySelector('.page-summary').innerText = `第 ${obj.curr} 页 / 共 ${Math.ceil(count / obj.limit)} 页` - 这个
count必须从服务端返回或缓存，laypage 自身不暴露总页数计算逻辑 - 别试图用
laypage.getElem('id')拿内部 DOM 改写——它的结构随时可能随版本变动，维护成本高
最易被忽略的是：laypage 的 curr 参数传字符串（比如 "2"）能正常跳转，但 table.reload() 要求必须是数字，混用会导致表格分页栏不动而数据错乱。移动端调试时多打一行 console.log(typeof obj.curr) 看类型，比猜强得多。
