uniapp移动端悬浮按钮（吸附边缘）

Uniapp移动端悬浮按钮可以通过CSS实现吸附边缘的效果。具体实现步骤如下：

html：

html 复制代码

<movable-area class="movable-area">
			<movable-view class="movable-view" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend" @click="record">
				<image :src="url+'/uploads/20231209/45a4381a8d120d73e310d10ad5aadc41.png'" mode="widthFix"
					class="iconImage"></image>
			</movable-view>
		</movable-area>

js：

javascript 复制代码

export default {
		data() {
			return {
				x: 364, //x坐标
				y: 700, //y坐标
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				}
			}
		},
		onLoad() {
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		methods: {
			onChange(e) {
				if (e.detail.source == "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log(this.x, this.y)
				}, 100)
			}
		}

css:

cs 复制代码

.iconImage {
        display: block;
        width: 120rpx;
        height: 120rpx;
        animation: iconImage 5s linear infinite;
    }

    @keyframes iconImage {
        0% {
            -webkit-transform: rotate(0deg);
        }

        25% {
            -webkit-transform: rotate(90deg);
        }

        50% {
            -webkit-transform: rotate(180deg);
        }

        75% {
            -webkit-transform: rotate(270deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    .contact {
        width: 50px;
        height: 50px;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        border-radius: 100%;
        opacity: 0;
    }

    .movable-area {
        height: 100vh;
        width: 750rpx;
        top: 0;
        position: fixed;
        pointer-events: none;
        z-index: 9999999;
    }

    .movable-view {
        width: 96rpx;
        height: 96rpx;
        background-color: #2561EF;
        border-radius: 50%;
        pointer-events: auto;
        position: relative;
        z-index: 9999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .movable-view image {
        width: 50rpx;
        height: 50rpx;
    }