开发中，经常需要实现在一个页面上，拖拽一个能自由移动的按钮，类似手机悬浮导航。uniapp组件中提供了这样的功能。

movable-view（movable-view | uni-app官网）

可移动的视图容器，在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

效果（视频效果点击上方链接在官网查看）：

代码：

<template>
  <movable-area class="movable-area">
    <movable-view class="movable-view" :x="x" :y="y" direction="all">
      <image  style="width: 120rpx;height: 120rpx" src="/static/e.jpg" @click="handleClick()"></image>
    </movable-view>
  </movable-area>
</template>
<script setup lang="ts">
const x = 300;
const y = 300;

const handleClick = ()=>{
    //点击跳转...
  //navigateTo()
}


</script>
<style scoped lang="scss">
page {
  width: 100vw;
  height: 100%;
}
.movable-area {
  //  可移动的范围  具体值根据需求自行调节
  height: 90vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none;
  z-index: 99999999;
}
.movable-view {
  width: 140rpx;
  height: 140rpx;
  pointer-events: auto;
}

</style>