uniapp 可拖动可吸附悬浮按钮，兼容app，小程序，H5

可以拖拽的悬浮按钮，全平台兼容，可以监听拖拽事件

UNIAPP插件地址:可拖动可自动吸附的悬浮按钮，兼容app，小程序，H5 - DCloud 插件市场

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	×	×	×	×	×

使用注意

• 属性名	类型	默认值	说明
  isDock	Boolean	false	是否自动停靠
  existTabBar	Boolean	false	当前页面是否包含tabbar
  bottomPx	Number	0	按钮默认位置离底部距离（px）
  @btnClick	EventHandle		点击事件
  @btnTouchstart	EventHandle		拖拽开始事件
  @btnTouchend	EventHandle		拖拽结束事件

• 示例代码

  复制代码<template>
  <view class="content">
      <cls-DragBtn is-dock @btnClick="btn_click" @btnTouchstart="touch_start" @btnTouchend="touch_end" :bottom-px="100">
          <image src="/static/scan.png" style="width: 100rpx;" mode="widthFix" ></image>
          <!-- <button>1132</button> -->
      </cls-DragBtn>
  </view>
  </template>
  
  <script>
  export default {
  
      methods: {
          btn_click() {
              console.log('btn_click1');
          },
          touch_start(){
              console.log('开始拖拽');
          },
          touch_end(){
              console.log('拖拽结束');
          }
      }
  }
  </script>

 示例代码下载：https://download.csdn.net/download/clschen/88580582