layer弹出层在移动端无法左右滑动，本质是未启用手势支持，其本身不监听touch事件；图片预览应直接用layer.photos，自定义内容需手动添加touch逻辑并处理滑动穿透。
layer弹出层在移动端无法左右滑动，本质是没启用手势支持
layer本身不处理 touchmove、touchstart 等原生触摸事件，也不内置滑动手势识别逻辑。你看到的“不能左右滑”，不是 layer 阻止了，而是它压根没监听——layer.open 创建的弹层只是普通 dom 容器，浏览器不会自动给 div 启用页面级的滑动行为（比如像 <body> 那样靠 overscroll-behavior 或原生滚动惯性）。
直接用 layer.photos 实现图片左右滑动最省事
如果你的场景是「弹出图片预览并左右切换」，别自己写滑动逻辑。Layui 已封装好 layer.photos，它基于 touch 事件实现了双指缩放 + 单指左右滑动翻页，且兼容 iOS/Android：
-
layer.photos内部已处理 touchstart/touchmove/touchend，包括速度阈值、方向判定、防误触 - 自动禁用背景滚动（通过
body.layui-layer-open { overflow: hidden }+scrollbar: false） - 滑动时会触发
show回调，可同步更新标题或缩略图状态
示例：
layer.photos({
photos: {
"title": "用户上传图片",
"data": [
{"src": "https://xxx/1.jpg"},
{"src": "https://xxx/2.jpg"}
]
},
anim: 5 // 0-6，推荐 5（左右滑入）
});
非图片类弹层要左右滑动，得自己加 touch 逻辑
如果是自定义内容（比如表单抽屉、步骤引导页），需要手动监听 touch 事件模拟滑动。关键点不是“让 layer 动起来”，而是：在弹层内容区包裹一个可 transform 的容器，并用 touchmove 改变 transform: translateX() 值。
- 必须设置
touch-action: none在滑动容器上，否则浏览器会抢走事件（尤其 iOS Safari） - 记录
touchstart的pageX，在touchmove中计算偏移量，避免抖动 - 滑动结束（
touchend）后判断位移是否超过阈值（如 50px），决定是回弹还是切换到下一页 - 不要直接操作
layero（弹层外框），它有固定定位和动画逻辑，应只动内部 content 区域
简写示意（放在 success 回调里）：
success: function(layero) {
const $content = layero.find('.layer-content');
$content.css('touch-action', 'none');
let startX = 0, moveX = 0;
$content.on('touchstart', function(e) {
startX = e.touches[0].pageX;
}).on('touchmove', function(e) {
e.preventDefault();
const currentX = e.touches[0].pageX;
moveX = currentX - startX;
$content.css('transform', `translateX(${moveX}px)`);
}).on('touchend', function() {
if (Math.abs(moveX) > 50) {
// 这里写切换逻辑，比如 showNextStep()
}
$content.css('transform', '');
});
}
移动端滑动穿透和背景滚动必须同步处理
即使你实现了内容左右滑动，如果没关掉底层滚动，手指划到底部时仍会触发 body 滚动——这不是 bug，是浏览器默认行为。必须组合控制：
- 打开弹层时：设
scrollbar: false+ 给body加layui-layer-open类（Layer 自动做） - 但 Layer 默认的
overflow: hidden对touchmove不完全生效，iOS 尤其明显，需额外加 CSS：
body.layui-layer-open {
overscroll-behavior: none;
position: fixed;
width: 100%;
top: -webkit-calc(var(--scroll-y, 0px));
top: calc(var(--scroll-y, 0px));
}
并在 JS 中记录并设置 --scroll-y 变量（用 $(document).scrollTop()），关闭弹层时还原。这点容易被忽略：只关 overflow 不足以阻止 iOS 的 bounce 效果。
