uniapp 可拖拽的悬浮按钮

588 阅读1分钟

可拖拽的悬浮按钮,兼容app,小程序,H5

可以监听拖拽事件 uniapp插件:ext.dcloud.net.cn/plugin?id=4…

属性名类型默认值说明
isDockBooleanfalse是否自动停靠
existTabBarBooleanfalse当前页面是否包含tabbar
bottomPxNumber0按钮默认位置离底部距离(px)
@btnClickEventHandle点击事件
@btnTouchstartEventHandle拖拽开始事件
@btnTouchendEventHandle拖拽结束事件

示例代码

 <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>