uniapp 可拖动悬浮窗组件

Uniapp 可以使用原生的 API 实现可拖动悬浮窗组件，具体实现方法如下：

1. 在页面上添加一个元素，作为悬浮窗口的容器。

2. 使用 touchstart 事件监听用户触摸悬浮窗口容器的开始位置。

3. 使用 touchmove 事件监听用户移动悬浮窗口容器的位置，并更新悬浮窗口的位置。

4. 使用 touchend 事件监听用户结束触摸悬浮窗口容器的位置，并保存悬浮窗口的位置。

5. 使用 uni.createIntersectionObserver() 方法监听页面滚动，如果滚动则重新设置悬浮窗口的位置。

需要注意的是，在使用原生 API 实现可拖动悬浮窗口组件时，需要考虑到不同设备分辨率和屏幕尺寸的问题，确保悬浮窗口在不同设备上的显示效果一致。

相关问题

uniapp可拖拽的弹出层

Uniapp中可以使用uni-popup组件实现弹出层的功能，但是默认情况下是不能拖拽的。不过你可以借助第三方插件来实现可拖拽的弹出层。

一个比较常用的插件是vue-draggable-resizable，在Uniapp中使用时需要先安装该插件：

npm install vue-draggable-resizable

然后在需要使用可拖拽弹出层的页面引入该组件：

<template>
  <div>
    <draggable-resizable :isDraggable="true" :isResizable="false">
      <div class="popup-content">
        <!-- 弹出层内容 -->
      </div>
    </draggable-resizable>
  </div>
</template>

<script>
import DraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    DraggableResizable,
  },
};
</script>

<style>
.popup-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

这里设置`isDraggable`为`true`表示可拖拽，`isResizable`为`false`表示不可调整大小。

如果需要在拖拽时更新弹出层的位置，可以使用`@drag`事件：

<template>
  <div>
    <draggable-resizable :isDraggable="true" :isResizable="false" @drag="onDrag">
      <div class="popup-content">
        <!-- 弹出层内容 -->
      </div>
    </draggable-resizable>
  </div>
</template>

<script>
import DraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    DraggableResizable,
  },
  methods: {
    onDrag(e) {
      console.log(e.x, e.y);
      // 更新弹出层位置的代码
    },
  },
};
</script>

在`onDrag`方法中可以获取到拖拽时的坐标，然后再更新弹出层的位置即可。

uniapp小程序中有一个可拖动悬浮窗,但是拖动时页面也会滚动,解决问题并给出完整代码

解决问题的方法是阻止事件冒泡。具体实现可以在悬浮窗的touchmove事件中调用event.stopPropagation()方法，阻止页面滚动事件的触发。

以下是一个简单的uniapp小程序中可拖动悬浮窗的代码实现，包括阻止事件冒泡的功能：

<template>
  <view>
    <view class="container">
      <view class="drag-window" :style="{left: posX + 'px', top: posY + 'px'}" @touchmove="onWindowMove($event)">
        <text>可拖动悬浮窗</text>
      </view>
    </view>
    <view class="content">
      <text>这是一个有滚动条的页面内容</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posX: 0,
      posY: 0,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    onWindowMove(event) {
      event.stopPropagation()
      let touch = event.touches[0]
      this.posX += touch.clientX - this.startX
      this.posY += touch.clientY - this.startY
      this.startX = touch.clientX
      this.startY = touch.clientY
    },
    onTouchStart(event) {
      let touch = event.touches[0]
      this.startX = touch.clientX
      this.startY = touch.clientY
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 300px;
}
.drag-window {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: #f00;
  cursor: move;
}
.content {
  height: 1000px;
  overflow-y: scroll;
}
</style>

在悬浮窗的touchmove事件中调用event.stopPropagation()方法，阻止页面滚动事件的触发。同时，悬浮窗的touchmove事件中记录当前的悬浮窗位置，根据手指滑动的距离计算出新的悬浮窗位置。

在模板中，使用@touchmove绑定悬浮窗的touchmove事件，使用:style绑定悬浮窗的位置。同时，使用@touchstart绑定onTouchStart方法，记录手指触摸时的位置。

在样式中，设置页面内容区域的高度为1000px，并使用overflow-y: scroll;实现滚动条的显示。同时，设置悬浮窗的样式，并设置其position为absolute，使其脱离文档流并可以自由拖动。