评论弹窗避免被视频遮挡需三步：ios/安卓webview中给video加playsinline等内联属性，弹窗外层设position:relative和高z-index，且不放在swiper内；滑动关闭时用catchtouchmove拦截并暂停video；滚动卡顿通过key优化、懒加载二级评论、uni-image头像及contain css解决；键盘弹起错位则监听keyboardheightchange事件并防抖校验位置。
评论弹窗怎么避免被视频遮挡？
视频组件在 iOS 和部分安卓 WebView 中默认是原生层渲染，z-index 无效，video 会强行盖在所有 view 上。评论弹窗（比如 u-popup 或 uni-popup）一旦被盖住，就点不到、滑不了。
解决办法不是调 z-index，而是让 video 主动“退让”：
- 给
video加style="position: relative; z-index: 1;"（仅对非原生层生效，H5 有效） - 真机（尤其 iOS 微信）必须加
playsinline、webkit-playsinline、x5-playsinline，否则 video 强制全屏，弹窗直接消失 - 弹窗容器外层加
style="position: relative; z-index: 9999;"，且确保父级没有overflow: hidden截断 - 别把弹窗放在
swiper内部——swiper的 transform 层级会干扰定位，统一挂到页面根节点下
滑动关闭弹窗时怎么防止误触视频？
用户手指从弹窗上往下滑，本意是关闭弹窗，但若滑动区域和下方 video 重叠，video 可能触发 @touchstart 或自动播放逻辑，导致弹窗没关成、视频还跳了。
关键不是禁用 video 事件，而是隔离滑动域：
- 弹窗打开时，给
video加:disable="true"（如果用的是封装好的 video 组件），或手动调videoContext.pause() - 用
catchtouchmove拦截弹窗内部的 touchmove，阻止事件冒泡到 video；不要只用@touchmove.stop，某些环境 stop 不生效 - 弹窗内容区用
scroll-view包裹，并设enable-back-to-top="false"，否则 iOS 下拉会触发 page 的回顶，干扰手势判断 - 滑动关闭阈值建议设为 120rpx，小于这个距离不关闭，防抖+防误触
评论列表滚动卡顿怎么优化？
评论区一展开就是几十条数据，每条带头像、昵称、时间、回复嵌套，scroll-view 或 list 滚动时掉帧明显，尤其低端安卓机。
这不是样式问题，是渲染负载过高：
- 用
v-for渲染时必须加:key="item.id"，且id是稳定唯一值，别用index - 二级评论默认收起，展开时才加载子列表，避免一次性渲染整棵树
- 头像用
uni-app的uni-image组件，开lazyLoad+show-menu-by-longpress关闭长按菜单（减少原生层交互开销） - 评论文字用
text-overflow: -webkit-line-clamp控制行数，别用u-line这类 JS 截断组件，它每次 resize 都重算 - 整个弹窗加
contain: layout paintCSS，告诉浏览器这块区域独立渲染，减少重绘范围
键盘弹起后弹窗位置错乱怎么办？
在 iOS 微信里，键盘弹出后 popup 常常被顶出可视区，或者底部留白过大，甚至被裁掉一半。
根本原因是微信 WebView 对 env(keyboardHeight) 支持不稳定，不能依赖 uni.getSystemInfoSync().keyboardHeight。
- 改用
@keyboardheightchange事件监听（uni-app 3.7.12+），它比 page scroll 更准 - 弹窗内部输入框聚焦时，用
uni.pageScrollTo({scrollTop: 0})强制清空页面滚动偏移，否则键盘会把弹窗推得更歪 - 弹窗底部按钮区加
padding-bottom: env(safe-area-inset-bottom)，但仅限 iOS；安卓用固定padding-bottom: 10rpx - 别用
safeAreaInsetBottom直接控制弹窗高度——它只影响弹窗容器，不影响内部滚动内容的实际可触区域
keyboardheightchange 事件触发时机比预期晚 100–200ms，且可能重复触发两次。建议用 setTimeout 加个防抖，再结合 getRect 检查弹窗底部是否真的在视口内，而不是只靠 height 算。
