瓜瓜头条

关于uniapp的拖动悬浮球

2021-07-22 14:55 由 一群bug 发表于 #移动端开发

这两天在做一个项目，有个小模块是悬浮球功能，可以拖动的那种

组件也找了，发现组件那个会很卡，而且页面会跟着滚动，球球初始位置也让人很难受

尤其是当我一刷新球球丢了就很蒙，看来那个还是需要完善的

然后我去百度搜了搜，然后找到了解决方法，我判断了下球球初始情况

初始是按百分比定位的，这样对一些大屏设备还是比较友好的，

而且我还精简了下代码

完整的可拖动悬浮球功能如下（可复制直接使用）：

注：如果球球是图片的话，只需要把ball的那个view改成image即可

<template>
    <view>
        <view class="holdon">
            <view class="ball"
                :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
                @touchstart="drag_start" @touchmove.prevent="drag_hmove" mode="aspectFit">
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        //悬浮球绝对位置百分比，页面刷新会回到这个位置
        props: {
            x: {
                type: Number,
                default: 80
            },
            y: {
                type: Number,
                default: 50
            },
            image: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                start: [0, 0],
                moveY: 0,
                moveX: 0,
                windowWidth: '',
                windowHeight: '',
            }
        },
        onShow() {
            //获取系统分辨率
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync();
            this.windowWidth = windowWidth
            this.windowHeight = windowHeight
        },
        methods: {
            drag_start(event) {
                this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
                this.start[1] = event.touches[0].clientY - event.target.offsetTop;
            },
            //判断防止悬浮球被拖出页面
            drag_hmove(event) {
                let tag = event.touches;
                if (tag[0].clientX < 0) {
                    tag[0].clientX = 0
                }
                if (tag[0].clientY < 0) {
                    tag[0].clientY = 0
                }
                if (tag[0].clientX > this.windowWidth) {
                    tag[0].clientX = this.windowWidth
                }
                if (tag[0].clientY > this.windowHeight) {
                    tag[0].clientY = this.windowHeight
                }
                this.moveX = tag[0].clientX - this.start[0];
                this.moveY = tag[0].clientY - this.start[1];
            },
        }
    }
</script>

<style>
    .ball {
        width: 100rpx;
        height: 100rpx;
        background: linear-gradient(to bottom, #F8F8FF, #87CEFA);
        border-radius: 50%;
        /* 防止页面滚动条或其他事件跟着动 */
        position: fixed !important;
        z-index: 9999;
    }
</style>

 

热门相关：骑士归来   刺客之王   重生之至尊千金   名门天后：重生国民千金   横行霸道