uni-app拖拽悬浮球必须用movable-area+movable-view，禁用手动touchmove；需设固定宽高、挂载App.vue顶层、微信小程序须嵌入隐藏video节点，App端仅nvue支持，跨平台需条件编译。
uni-app里拖拽悬浮球必须用movable-area + movable-view
直接用position: fixed加@touchmove手动算坐标，在小程序和app端会卡顿、事件穿透、拖不动，甚至在ios上完全失效。官方组件movable-area是原生封装的，跨平台行为一致，性能也远高于手写逻辑。
关键点：
-
movable-area必须设置明确的width和height（不能用100%或100vw），否则在微信小程序中直接不响应拖动 -
movable-view的x/y单位是px，不是rpx，需用uni.upx2px()或getSystemInfoSync().windowWidth动态换算 - 不要把
movable-area放在某个页面组件里——它得挂到App.vue最外层，才能跨页面存在 - H5端
movable-area支持z-index，但小程序中它的层级由原生容器决定，务必确保父级video或cover-view已正确包裹（见下一条）
微信小程序必须用video隐藏节点挂载movable-area
微信小程序要求movable-area只能作为video、map、camera等原生组件的子节点才生效。uni-app没全局原生容器，所以得“骗”过平台：放一个<video src="" style="display:none"></video>，再把movable-area插进去。
常见错误现象：
- 悬浮球点了没反应、拖一下就消失 → 没挂到
video下，或video被v-if控制导致销毁 - 拖到一半突然跳回原位 →
movable-area尺寸没随屏幕变化重设，onResize没监听 - 安卓真机拖拽卡顿 → 没关掉
movable-view的out-of-bounds（设为false），系统默认做边界反弹动画
自动吸附边缘要靠@touchend里算松手时的x值
movable-view的@change只报告实时坐标，@touchend才是放手瞬间的最终位置。吸附逻辑不能依赖currentX，而要看松手那一刻离左/右边缘哪个更近。
实操建议：
- 先用
uni.getSystemInfoSync()拿到windowWidth，减去ballWidth得到右边界最大x值 - 松手时若
currentX ，就<code>this.ballX = 0；若currentX > (2 * windowWidth) / 3，就this.ballX = windowWidth - ballWidth - 别用
transition做吸附动画——movable-view不支持CSS过渡，要用setTimeout改x值触发原生动画 - Android上
touchend可能延迟触发，加个touchcancel兜底
App端必须用nvue页面，movable-area在vue页面里无效
App端的vue页面本质是Webview，movable-area无法突破容器层级，切页即消失。只有nvue页面能调用原生视图API，实现真正全局悬浮。
容易踩的坑：
- 在
pages.json里把ball.nvue加进subNVue或独立页面路由 → 错，它不该有tabBar、不能被路由管理，应在App.vue的onLaunch里用uni.navigateTo({ url: '/pages/ball/ball' })启动后立即uni.hideTabBar() - 用
v-if控制显隐 → nvue下会触发整个视图重建，拖拽状态丢失，改用opacity: 0+pointer-events: none - 拖拽限位没考虑安全区 → iOS底部home指示器、Android刘海屏都会吃掉一部分空间，得用
safeArea.bottom而不是windowHeight
最麻烦的其实是跨平台状态同步：H5用fixed、小程序靠cover-view、App端必须nvue，三套逻辑共用一套store数据没问题，但DOM更新时机、事件触发条件、坐标系单位全都不一样。别指望一个组件文件跑通全部平台，该分条件编译就得分。
