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

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

平台兼容性

Vue2Vue3
√×
App快应用微信小程序支付宝小程序百度小程序字节小程序QQ小程序
app-vue√√√√√√
钉钉小程序快手小程序飞书小程序京东小程序
√√√√
H5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxPC-Safari
√√√√×××××

使用注意

  • 属性名类型默认值说明
    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>

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

更多推荐