uniapp 可拖动悬浮窗组件

在 UniApp 中实现可拖动的悬浮球，并解决拖动后不吸附边缘的问题，可以通过使用 `movable-view` 或 `movable-area` 组件来实现基础的拖动功能，再结合自定义逻辑实现吸附边缘的效果。 ### 悬浮球组件基础实现 使用 `movable-view` 实现基础的可拖动悬浮球： ```html <template> <view class="container"> <movable-area class="movable-area"> <movable-view class="floating-ball" :x="position.x" :y="position.y" direction="all" @change="handleMove" @touchend="handleTouchEnd" > <!-- 悬浮球内容 --> </movable-view> </movable-area> </view> </template> ``` ### 样式定义 ```css .container { position: relative; width: 100%; height: 100%; } .movable-area { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } .floating-ball { width: 60px; height: 60px; background-color: #007AFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; } ``` ### 逻辑处理与吸附边缘实现 在 `onLoad` 或 `onReady` 中初始化悬浮球的位置： ```javascript <script> export default { data() { return { position: { x: 0, y: 0 }, screenWidth: 0, screenHeight: 0 }; }, onReady() { const systemInfo = uni.getSystemInfoSync(); this.screenWidth = systemInfo.windowWidth; this.screenHeight = systemInfo.windowHeight; }, methods: { handleMove(e) { // 记录当前位置 this.position.x = e.detail.x; this.position.y = e.detail.y; }, handleTouchEnd() { // 计算最近边缘 const halfBallWidth = 30; // 悬浮球的一半宽度 const halfBallHeight = 30; // 悬浮球的一半高度 let newX = this.position.x; let newY = this.position.y; // 判断靠近哪一侧边缘 if (newX < this.screenWidth / 2) { newX = 0; } else { newX = this.screenWidth - 2 * halfBallWidth; } if (newY < this.screenHeight / 2) { newY = 0; } else { newY = this.screenHeight - 2 * halfBallHeight; } this.position.x = newX; this.position.y = newY; } } }; </script> ``` ### 优化拖动体验 为了确保拖动时的流畅性和吸附效果，可以加入动画过渡： ```css .floating-ball { transition: transform 0.3s ease-in-out; } ``` ### 适配多端 UniApp 的 `movable-view` 在不同平台上的表现略有差异，特别是在小程序和 H5 之间。建议使用 `@touchend` 来触发吸附逻辑，以确保在所有平台上都能获得一致的体验[^1]。 ### 总结 通过 `movable-view` 提供的拖动功能，结合 `@touchend` 事件判断悬浮球的位置并进行吸附逻辑处理，可以有效解决拖动后不吸附的问题。同时，加入动画过渡可以提升用户体验，使吸附效果更加自然流畅[^2]。 ---

### UniApp 图片拖拽排序组件实现 在开发基于 UniApp 的应用时，为了实现图片的拖拽排序功能，可以借助 `vue-draggable` 或者原生 HTML5 Drag API 来完成这一需求[^1]。 #### 使用 vue-draggable 实现图片拖拽排序 安装依赖： ```bash npm install vuedraggable --save ``` 创建一个简单的页面结构并引入 draggable 组件： ```html <template> <view class="container"> <!-- 可拖动区域 --> <draggable v-model="imageList" @end="onDragEnd"> <transition-group> <view v-for="(item, index) in imageList" :key="index" class="drag-item"> <image :src="item.src"></image> </view> </transition-group> </draggable> <!-- 底部按钮用于测试数据变化 --> <button type="primary" @click="logImageOrder">查看当前顺序</button> </view> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable }, data() { return { imageList: [ { src: '/static/images/01.jpg' }, { src: '/static/images/02.jpg' }, { src: '/static/images/03.jpg' } ] }; }, methods: { onDragEnd(event) { console.log('拖拽结束', event); }, logImageOrder() { this.imageList.forEach((img, idx) => { console.log(`第${idx + 1}位`, img.src); }); } } }; </script> <style scoped> .drag-item { margin-bottom: 10px; } </style> ``` 此代码片段展示了如何利用 `vue-draggable` 插件来构建可交互式的图像列表，并允许用户通过触摸或鼠标操作重新排列这些项目的位置。当拖拽动作完成后会触发相应的事件处理函数，在这里可以通过控制台打印新的排列情况以便调试验证[^1]。