uniapp手机端可移动悬浮球组件实现

uniapp手机端可移动悬浮球组件实现

1.相关知识点

1. movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域
2. 即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围
3. movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动
4. movable-view 必须设置width和height属性，不设置默认为10px
5. movable-view 默认为绝对定位，top和left属性为0px
6. 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

2.具体代码实现

<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @click="Click">
                <image src="../../static/use/icon/add.png"></image></movable-view>
		</movable-area>
	</view>
</template>

<script>
export default {
	name: 'XuanFu',
	data() {
		return {
			x: 290, //x坐标
			y: 320 //y坐标
		};
	},
	methods: {
		Click() {
			//自定义事件
			this.$emit('onClickXuanFu');
		}
	}
};
</script>

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

.movable-area {
	height: 100vh;
	width: 750rpx;
	top: 0;
	position: fixed;
	pointer-events: none; //此处要加，鼠标事件可以渗透
	.movable-view {
		width: $all_width;
		height: $all_height;
		background-color: #e0d6d3;
		border-radius: 50%;
		pointer-events: auto; //恢复鼠标事件
		image {
			width: $all_width;
			height: $all_height;
		}
	}
}
</style>

最近也开发了自己的公众号，会在上面分享前端方面的知识，有兴趣的话，走个关注吧！！！