可拖拽的悬浮按钮,兼容app,小程序,H5
可以监听拖拽事件 uniapp插件:ext.dcloud.net.cn/plugin?id=4…
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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>