使用uniapp实现全局悬浮按钮(可拖动)

效果如下

实现方案

使用uniapp官方组件 movable-area和movable-view

代码解析

• 在components新建一个xxx.vue组件
• 重点在于movable-area与movable-view需要分别增加pointer-events: none和pointer-events: auto用于组件事件穿透与恢复组件事件（此处不加会导致引用该组件的父组件无法使用事件）
• 组件代码如下：

<template>
    <view>
        <movable-area class="movable-area">
            <movable-view class="movable-view" :x="x" :y="y" direction="all">
                <image src="../static/goHome.png"></image>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                x: 320,        //x坐标
                y: 520,        //y坐标
            }
        }
    }
</script>

<style lang="scss">
    $all_width: 96rpx;
    $all_height:96rpx;

    .movable-area {
        height: 100vh;
        width: 750rpx;
        top: 0;
        position: fixed;
        pointer-events: none;        //此处要加，鼠标事件可以渗透
        .movable-view {
            width: $all_width;
            height: $all_height;
            pointer-events: auto;    //恢复鼠标事件
            image {
                width: $all_width;
                height: $all_height;
            }
        }
    }
</style>

组件生成后可mian.js全局挂载，后续不需要每个页面都进行引入

import App from './App'
import Vue from 'vue'
import myHome from '@/components/my_home.vue'        //引入组件

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})

Vue.component('my-home',myHome)                        //进行全局挂载

app.$mount()

全局挂载后可在需要使用的页面使用

<template>
    <view class="content">
        <!--组件引用-->
        <my-home></my-home>

    </view>
</template>