Uniapp的movable-view组件，实现悬浮可拖拽功能

页面呈现状态：

将获取文件按钮封装组件，具体代码如下：

<template>
    <movable-area class="fixed-box">
        <movable-view class="fixed-button" direction="all" :inertia="true" x="180" y="-250">
            <view class="menuBox">
                <!-- <u-icon class="mainMenu" name="plus-circle" size="140" @click="declick"></u-icon> -->
                <view class="mainMenu" @click="declick">获取文件</view>
                <view class="posi" :animation="animationData">
                    <button class="menu-btn" hover-class="hClass" open-type="contact" @click="gzwFile()">
                        <!-- <u-icon name="kefu-ermai" size="50"/> -->
                        国资委
                    </button>
                    <button class="menu-btn" hover-class="hClass" open-type="contact" @click="sjFile()">
                        <!-- <u-icon name="map" size="50" /> -->
                        上级
                    </button>
                </view>
            </view>
        </movable-view>
    </movable-area>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            animationData: {},
            off: true,
        }
    },
    // 子组件onLoad，onShow不执行------------避坑
    methods: {
        // 悬浮按钮
        declick() {
            if (this.off) {
                //使用动画
                this.rotateAndScale()
            } else {
                this.norotateAndScale()
            }
            this.off = !this.off
        },
        //定义动画内容
        rotateAndScale() {
            var animation = uni.createAnimation({
                duration: 500,
                trmingFunction: 'ease'
            })
            this.animation = animation
            this.animation.rotate(0).translateY(-167).step();
            //导出动画数据传递给data层
            this.animationData = this.animation.export();
        },
        //当!off的时候动画回到原始位置
        norotateAndScale() {
            this.animation.rotate(0).translateY(0).step();
            this.animationData = this.animation.export();
        },
        gzwFile(){
            
        },
        sjFile(){
            
        }
    }
}
</script>

<style lang="scss" scoped>

button::after {
    border: none;
}

.menuBox {
    width: 140rpx;
    height: 100%;
    z-index: 1;
    position: relative;
    right: -2rpx;
    bottom: 0px;
    overflow: hidden;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.fixed-box {
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 4rpx;
    bottom: 0;
    z-index: 100000;
}

.fixed-button {
    pointer-events: auto;
    width: 200rpx;
    height: 300rpx;
    right: 200rpx;
    left: auto;
    top: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 55rpx;
}

::v-deep .menu-btn {
    height: 40px;
    width: 170rpx;
    background-color: transparent;
    display: inline-block;
    padding-left: 0px !important;
    margin-left: 0px !important;
    font-size: 18px !important;
    color: white;
    text-align: center;
    line-height: 40px;

    &:first-child {
        margin-top: 30rpx;
    }
    // margin-top: 16rpx;
}


.mainMenu {
    width: 140rpx;
    height: 140rpx;
    position: absolute;
    left: 2rpx;
    bottom: -2rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 45rpx;
    font-size: 15px;
    background-color: #fff;
    border: 2px solid #3c9cff;
    border-radius: 45rpx;

}

.posi {
    width: 140rpx;
    height: 300rpx !important;
    position: absolute;
    left: 2rpx;
    bottom: -315rpx;
    z-index: -1;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #3c9cff;
    border-radius: 20rpx;
}

.posi>image {
    width: 50rpx;
    height: 50rpx;
    margin-top: 30rpx;
}

.hClass{
    background-color: red !important;
}
</style>

使用时的问题

1、uniapp中使用时为子组件，其onLoad和onShow不执行代码

2、拖动图标上方也会响应操作，这个暂未解决，有大佬愿意解决的话那就更好了

声明：此文借鉴了该文----------http://t.csdnimg.cn/Rfk4A