uniapp 拖拽小球编写

编写floatButton组件，主要代码如下

<template>
    <view>
        <view class="float-button"
        :style="{
            left: safeLeft,
            top: safeTop,
            width: width + 'px',
            height: height + 'px',
            'transition': isMove ? 'none' : 'all .2s',
            'display': isShow ? 'block' : 'none'
        }"
        @touchstart.prevent.stop="dragStart" 
        @touchmove.prevent.stop="dragMove"
        @touchend.prevent.stop="dragStop"
        :animation="animation">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            //  距离左边的百分比
            x: {
                type: Number,
                default: 0
            },
            //  距离右边的百分比
            y: {
                type: Number,
                default: 0
            },
            //  宽度
            width: {
                type: Number,
                default: 50
            },
            //  高度
            height: {
                type: Number,
                default: 50
            },
            //  离页面边上的距离
            padding: {
                type: Number,
                default: 10
            }
        },
        data () {
            return {
                isShow: false,
                isMove: false,
                start: [0, 0],
                moveY: null,
                moveX: null,
                windowWidth: null,
                windowHeight: null,
                animation: {},
                timeout: null
            }
        },
        computed: {
            safeLeft () {
                let maxX = this.windowWidth - this.width - this.padding
                let minX = this.padding
                if (this.moveX == null) {
                    let safeX = (this.x / 100) * this.windowWidth
                    return safeX > maxX ? maxX + 'px' : (safeX < minX) ? minX + 'px' : safeX + 'px'
                }
                return this.moveX > maxX ? maxX + 'px' : (this.moveX < minX) ? minX + 'px' : this.moveX + 'px'
            },
            safeTop () {
                let maxY = this.windowHeight - this.height - this.padding
                let minY = this.padding
                if (this.moveY == null) {
                    let safeY = (this.y / 100) * this.windowHeight
                    return safeY > maxY ? maxY + 'px' : (safeY < minY) ? minY + 'px' : safeY + 'px'
                }
                return this.moveY > maxY ? maxY + 'px' : (this.moveY < minY) ? minY + 'px' : this.moveY + 'px'
            }
        },
        mounted () {
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync()
            this.windowWidth = windowWidth
            this.windowHeight = windowHeight
            this.$nextTick(() => {
                this.isShow = true
            })
        },
        methods: {
            dragStart(event) {
                this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
                this.start[1] = event.touches[0].clientY - event.target.offsetTop;
            },
            //判断防止悬浮球被拖出页面
            dragMove(event) {
                this.isMove = true
                const touch = event.touches[0] || event.changedTouches[0]
                this.moveX = touch.clientX - this.start[0]
                this.moveY = touch.clientY - this.start[1]
            },
            dragStop (event) {
                // 判断在左侧还是右侧
                if (this.isMove) {
                    this.isMove = false
                    if (this.moveX > this.windowWidth / 2) {
                        this.moveX = this.windowWidth - this.width - this.padding
                    } else {
                        this.moveX = 0
                    }
                } else {
                    this.$emit('click')
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .float-button{
        position: fixed;
        z-index: 999;
        transition: all .2s;
    }
</style>

使用

<floatButton :width="40" :height="40" :x="90" :y="90" @click="clickFun">
  // 这里放置需要的内容
</floatButton>

效果如图所示

image.png