不能直接复用uni-popup作微博式底部浮层，因其全屏遮罩、高度不可控、不支持拖拽及原生组件穿透；需按平台分别用fixed+touch、cover-view或plus.nativeobj.view实现。
uni-popup 底部弹层能否直接复用？
不能直接当“微博详情页底部操作浮层”用。uni-popup 默认是全屏遮罩 + 滑入动画，且 type="bottom" 时会撑满整个宽度、高度不可控，缺少微博那种「半露内容+可拖拽+不遮地图/tabbar」的关键特性。它适合模态选择器（如时间、地址），但不适合长期驻留、需交互的底部操作区。
为什么 map 或 tabbar 总被浮层挡住？
根本原因是 uni-app 的渲染层级规则：普通 view 在小程序中无法突破原生组件（map、tabbar、video）的 z-index 上限。你写的 position: fixed 在 H5 有效，在小程序里会被截断或穿透。
- 微信小程序必须用
cover-view，且它只能作为map/video等原生组件的**直接子节点**才生效 - uni-app 没有全局
map实例，所以常见 hack 是在App.vue里塞一个隐藏<video src="" style="display:none"></video>，再把浮层挂到它的cover-view下 - Android App 需动态申请
android.permission.SYSTEM_ALERT_WINDOW权限，否则plus.nativeObj.View创建的浮窗直接不显示
怎么让浮层支持拖拽+三态（收起/半开/展开）？
靠纯 CSS transition 不够——它无法响应手指滑动轨迹。必须结合 touch 事件 + 动态计算位移，再用 uni-transition 或 transform: translateY() 驱动动画。
- 监听
touchstart记录初始 Y 坐标，touchmove计算偏移量，限制范围（比如只允许在85vh到20vh之间移动） - 松手后根据速度和剩余距离判断停在哪一态：用
this.$refs.layer.step({ transform: 'translateY(XXpx)' })触发uni-transition动画 - 避免在
scroll-view内部嵌套浮层——滚动会劫持 touch 事件，导致拖拽失灵；浮层应脱离滚动容器，用绝对定位固定在页面底部区域 - 状态变量（如
layerState: 'collapsed' | 'half' | 'expanded'）必须存在全局 store，否则页面跳转后状态丢失
实际结构怎么组织才不踩坑？
微博式浮层本质是「独立于页面内容、跨路由存活、可拖拽、不干扰原生组件」的 UI 元素。它不该写在某个 page.vue 里，而应锚定在 App.vue 最外层，并按平台条件编译：
- H5：用
<view class="float-bar" style="position:fixed; bottom:0; left:0; width:100%; z-index:9999"></view>+touch事件 - 微信小程序：用隐藏
<video></video>+<cover-view></cover-view>+<cover-image></cover-image>（按钮图标），所有样式和事件都得用 cover 组件语法 - App：用
plus.nativeObj.View创建原生视图，drawText/drawRect绘制内容，setStyle更新位置
最易被忽略的一点：浮层内部如果要放 scroll-view（比如微博评论列表），必须给它设固定高度（如 height: 300rpx），且父级 cover-view 不能用 flex: 1 —— cover 组件不支持 flex 布局，高度会塌陷。
