waterElectricityMinApp/pagesRepairs/components/floatButton.vue

<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @click="handleGoPage">消息通知</movable-view>
		</movable-area>
	</view>
</template>

<script>
export default {
	data() {
		return {
			x: 300, //x坐标
			y: 400 //y坐标
		}
	},
	methods: {
		// 点击悬浮按钮回调
		handleGoPage() {
			uni.navigateTo({
				url: '/pagesRepairs/message/message'
			})
		}
	}
}
</script>

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

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