移动端侧边栏滑动需原生监听touchstart/touchend计算位移，达30px阈值时调用offcanvas.show()/hide()；仅在移动端启用，绑定到main等有高度的容器，preventdefault防滚动，并注意ios视口变化影响。
移动端侧边栏滑动触发逻辑怎么写
Bootstrap 本身不提供手势滑动（swipe）控制侧边栏显隐的功能，offcanvas 组件只响应点击和键盘事件，默认不监听 touchmove 或 swipe。想靠手指左右滑动呼出/收起侧边栏，必须自己补手势识别逻辑。
关键不是改 Bootstrap 源码，而是监听 touchstart/touchmove/touchend，计算滑动方向与距离，再调用 offcanvas.show() 或 offcanvas.hide()。
- 只在移动端启用（
matchMedia('(max-width: 991.98px)')判断，避免桌面端误触发） - 滑动阈值建议设为
30px：太小易误触，太大响应迟钝 - 必须限制仅在页面主体区域（如
<main></main>或.container）上触发，否则在侧边栏内部滑动会反复开关 - 滑动过程中要
preventDefault()，否则页面会跟着滚动
如何用原生 JS 绑定 swipe 并联动 Bootstrap offcanvas
Bootstrap 5.3+ 的 Offcanvas 实例支持 JS API 调用，不需要操作 DOM 类名或样式。先获取实例，再根据手势方向决定 show/hide：
const offcanvasEl = document.getElementById('sidebar');
const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
let startX = 0;
<p>document.querySelector('main').addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
});</p><p>document.querySelector('main').addEventListener('touchend', e => {
if (!offcanvasEl.classList.contains('show')) {
const endX = e.changedTouches[0].clientX;
if (startX - endX > 30) offcanvas.show(); // 右滑 → 呼出
} else {
const endX = e.changedTouches[0].clientX;
if (endX - startX > 30) offcanvas.hide(); // 左滑 → 收起
}
});
</p>
注意：offcanvas 默认从左侧进入（data-bs-placement="start"），所以右滑触发 show 是符合直觉的；如果用了 end，方向逻辑要反过来。
为什么 swipe 有时不生效或触发两次
常见原因不是代码写错，而是浏览器默认行为干扰或事件绑定时机不对：
-
touchstart和touchend必须绑定在**同一个元素**上，且该元素需有明确宽高（空 div 或 flex 子项未设min-height会导致 touch 事件不触发） - 部分安卓 WebView 会把长按识别为“选择文字”，从而阻止
touchstart，加user-select: none到 body 或 main 上可缓解 - 如果页面同时用了第三方库（如 Swiper、Hammer.js），它们可能劫持了 touch 事件，导致你的监听器收不到
touchend -
offcanvas.show()是异步的，连续快速滑动时，第二次调用可能被忽略——加个防抖（setTimeout+ 标志位）更稳妥
要不要用第三方手势库替代原生实现
纯原生够用，但如果你项目已引入 hammer.js 或 vueuse，可以省去坐标计算：
// 使用 hammer.js 示例（需提前初始化）
const hammer = new Hammer(document.querySelector('main'));
hammer.on('swiperight', () => offcanvas.show());
hammer.on('swipeleft', () => offcanvas.hide());
不过要注意：Hammer 默认开启 recognizeWith 和多点触控，可能和页面缩放、图片拖拽冲突；vueuse 的 useSwipe 更轻量，但需搭配 Composition API 使用。对多数 Bootstrap 项目，原生三事件足够稳定，没必要额外增加依赖。
真正容易被忽略的是：滑动区域必须覆盖整个可视区高度（min-height: 100vh），否则底部留白处无法触发；另外 iOS Safari 在地址栏展开/收起时会重排视口，clientX 计算可能偏移，建议用 screenX 替代（但要注意横竖屏切换时的兼容性）。
