uniapp如何实现小程序页面的自由拖动功能？下面这篇文章介绍了uniapp实现小程序页面自由拖动组件的方法，希望对大家有所帮助！
先看实现效果：
[相关推荐：“uniapp教程”
实现过程
根据查阅文档，大约有三种方法可以实现拖动功能：
1.监控需要拖动的元素catchtouchmove事件，动态修改样式坐标
这种方法最容易被认为是通过js监控触摸位置来动态修改元素坐标。但拖动是一个非常实时的操作，你不能说在这个操作中设置节流函数来减少setdata操作，而且每个setdata操作本身也更耗费性能，很容易导致拖动卡住，这个方案可以首先排除。
2.movable-area movable-view
movable-area组件的功能是定义一个区域，用户可以自由移动该区域中的movable-view组件，movable-view可以轻松设置放大和缩小效果。根据组件的定义，可以认为它的使用场景可能是在页面的局部区域拖动和缩放一些元素，这与我们想要在整个页面上自由拖动的需求不一致。
3.wxs响应事件
wxs是专门用来解决频繁交互的场景。它直接在视图层运行，避免了视图层与逻辑层通信造成的性能损失，实现了流畅的动画效果。详见：wxs响应事件 。根据wxs的使用场景，基本上可以确定我们要实现的功能应该使用wxs方案。
代码实现
我们使用uniapp框架，查阅uniapp文档，官方直接提供了一个自由拖动的代码案例，链接点击此处。
直接拿官方代码示例进行改造，如下：