关于uni-app中使用 movable-area及movable-view标签实现悬浮拖拽功能

1.背景描述

在页面中，添加一个悬浮按钮并实现拖动它到任意位置。使用到的内置组件有 movable-area, movable-view。

2.效果

3.具体代码实现

<template>
  <movable-area class="movable-area">
    <movable-view class="movable-view" :x="x" :y="y" direction="all">
      <view class="float-btn">悬浮按钮</view>
    </movable-view>
  </movable-area>
</template>
<script>
  export default {
    data(){
      return {
        x: 300,
        y: 300
      }
    }
  }
</script>
<style scoped lang="less">
  page {
    width: 100vw;
    height: 100%;
  }
  .movable-area {
    //  可移动的范围
    height: 100vh;
    width: 750rpx;
    top: 0;
    position: fixed;
    pointer-events: none; //鼠标事件可以渗透
  }
  .movable-view {
    width: 140rpx; // 按钮大小
    height: 140rpx;
    pointer-events: auto; //恢复鼠标事件
  }
  .float-btn {
    width: 140rpx;
    height: 140rpx;
    line-height: 140rpx;
    text-align: center;
    background: #e0241b;
    box-shadow: 0 3rpx 6rpx 1rpx rgba(224,36,27,.3);
    border-radius: 50%;
    position: fixed;
  }
</style>

4.关于movable-area, movalbe-view 组件信息

movable-area: 可拖动区域。即手指/鼠标按住 movable-view拖动或双指缩放，但拖不出 movable-area规定的范围。
              movable-area 必须设置width，height属性，如果不设置的话默认为 10px。
              scale-area默认值为false，当里面的movable-view设置支持双指缩放时，设置此值可将手势生效区域修改为整个
              movable-area。

movable-view： 可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
               movable-view 必须在 movable-area 组件中，并且必须是子节点，否则不能移动。
               属性有：
                  direction：默认值为 none，可选值有 all, vertical, horizontal,none。
                  inertia： 默认值为false， 是否带有惯性。
                  out-of-bounds：默认值为false，超过可移动区域后，movable-view是否还可以移动。
                  x: 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围，改变x的值会触发动画。
                  y: 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围，改变y的值会触发动画。
                  disabled： 是否禁用，默认值为 false。
                  scale： 是否支持双指缩放，默认缩放手势生效区域在movable-view内。
                  

 

 

参考链接：

       https://uniapp.dcloud.net.cn/component/movable-area.html   - 官方文档

       https://uniapp.dcloud.net.cn/component/movable-view.html   - 官方文档