可以拖拽的悬浮按钮，全平台兼容，可以监听拖拽事件
UNIAPP插件地址:可拖动可自动吸附的悬浮按钮，兼容app，小程序，H5 - DCloud 插件市场
平台兼容性
| 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
