uniapp 悬浮球 可回弹

<template>
	<!-- 悬浮球 -->
	<movable-area class="movableArea">
		<!-- damping:官方默认值20，控制x或y改变时的动画和过界回弹的动画，值越大移动越快
			 direction: 移动方向，属性值有all、vertical、horizontal、none
		     friction: 摩擦系数,用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止，越小，滑动会有停留，会有原路返回的情况 -->
			 
		<movable-view class="movableView" :x="x" :y="y" :position="position" direction="all" :damping="30"  :friction="500"
		 @change="onChange" @touchend="onTouchend">
			<!-- <text class="close" @tap="close($event)">X</text> -->
			<slot></slot>
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		name: 'suspendedBall',
		props: {
			// 悬浮球位置：1.左上角 2.右上角 3.左下角 4.右下角
			position: {
				type: Number,
				default: 4
			}
		},

		data() {
			return {
				timed: null,
				x: 100,
				y: 348,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				}
			};
		},

		mounted() {			
			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;

					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;
				}
			})
		},

		methods: {
			// close (e) {
			// 	this.$emit('close-handler', { e:e })
			// },
			
			/**
			 * @param {Object} e拖动触发事件
			 */
			onChange(e) {
				// console.log('拖动：', 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;
				this.timed = setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					// console.log('抬起', this.x, this.y)
				}, 30)
			},
		},

		beforeDestroy() {
			clearTimeout(this.timed)
		}
	}
</script>

<style lang="scss" scoped>
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;

		.movableView {
			pointer-events: auto; //可以点击
			width: 120rpx;
			height: 120rpx;

			
			.close {
				    position: absolute;
				    top: -54rpx;
				    right: 12rpx;
			}
		}
	}
</style>