uniapp 如何使用subNVue原生子窗体创建可拖拽的悬浮窗

UniApp 中的 SubNVue（子页面）可以用来创建原生子窗体，包括可拖拽的悬浮窗。实现这样的功能通常需要结合 Vue 的组件化思想和一些原生 API，如 Android 的 `ViewGroup` 或 iOS 的 `UIStackView` 来实现拖动效果。以下是一个简单的步骤指南：

1. **步骤一：设计 UI**
在 UniApp 的项目中创建一个新的 Vue 组件，用于展示悬浮窗的内容。你可以使用 WXML 和 WXSS 进行样式定制，使其具备悬浮和可拖拽的外观。

<!-- template.wxml -->
<view class="suspension-view">
  <!-- 悬浮窗内容 -->
  <view draggable="true" @dragstart="onDragStart" @dragmove="onDragMove" @dragend="onDragEnd">
    <!-- ... -->
  </view>
</view>

/* styles.wxss */
.suspension-view {
  position: fixed; /* 设置浮动位置 */
}

2. **步骤二：绑定事件处理****
在 Vue 组件的 JS 文件中，你需要为 `draggable` 属性添加对应的 Vue 生命周期钩子以及触摸事件处理器，例如 `onDragStart`, `onDragMove`, `onDragEnd`。

<script>
export default {
  methods: {
    onDragStart(e) {
      // 开始拖动时记录起始位置和触点
      this.startPosition = e.detail;
    },
    onDragMove(e) {
      // 计算移动的距离，并更新子视图的位置
      let newPosition = { x: this.startPosition.x + e.detail.dx, y: this.startPosition.y + e.detail.dy };
      this.$refs.subNVue.setProperties({ top: newPosition.y, left: newPosition.x });
    },
    onDragEnd(e) {
      // 阻止默认行为并取消悬停效果（如果有）
      e.preventDefault();
    }
  }
};
</script>

3. **步骤三：创建子视图（SubNVue）**
使用 `uni.createSubNVue` 创建子页面实例，并将它作为动态组件挂载到父组件上。这样子视图就可以接收外部传递的属性，比如位置信息。

<template>
  <view ref="subNVue"></view>
</template>

<script setup>
import { createSubNVue } from '@dcloudio/uni-app';

const childComponent = await createSubNVue('your-child-component.vue');
// 将子视图插入到指定容器
this.$el.appendChild(childComponent.root);
</script>

4. **注意事项**
- 确保父组件有权限操作子组件（`childComponent`），可以在父组件上设置 `permission: 'scope.write'`。
- 为了获取更精确的拖动效果，可能需要配合使用一些第三方库，如 `uni-draggable`。