uniapp--悬浮可拖动按钮-实现思路

<template>
	<view class="content">
		<view :style="{'transform':'translate3d('+xMove+'px,'+yMove+'px,0)'}" class="touch" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">↑</view>
	</view>
</template>

<script>
var curPoint = {
	x: 0,
	y: 0
}; // 记录原点
var startPoint = {};
// 标志位（只触发点击事件按，并没有移动-就不必触发end事件）
var isTouchMove = false;
export default {
	data() {
		return {
			xMove: 0,
			yMove: 0
		};
	},
	onLoad() {},
	mounted() {
		// 想通过过去节点来实现动态移动--这条路没有走通
		// let view = uni.createSelectorQuery().in(this);
		// view.select('.touch').boundingClientRect(data => {
		// 	console.log(data)
		// 	data.top = 100
		// }).exec();
		// let view = uni.createSelectorQuery().select('.touch');
		// view.fields({rect: true},data => {
		// 	console.log(data)
		// 	data.top = 100
		// }).exec();
	},
	methods: {
		handleStart(ev) {
			// console.log('start',ev);
			// 记录一开始手指按下的坐标
			var touch = ev.changedTouches[0];
			startPoint.x = touch.pageX;
			startPoint.y = touch.pageY;
		},
		handleMove(ev) {
			// console.log('move',ev);
			// 防止页面高度很大，出现滚动条，不能移动-默认拖动滚动条事件
			ev.preventDefault();

			isTouchMove = true;

			var touch = ev.changedTouches[0];
			var diffPonit = {}; // 存放差值
			var movePonit = {
				// 记录移动的距离
				x: 0,
				y: 0
			};
			diffPonit.x = touch.pageX - startPoint.x;
			diffPonit.y = touch.pageY - startPoint.y;
			// 移动的距离 = 差值 + 当前坐标点
			movePonit.x = diffPonit.x + curPoint.x;
			movePonit.y = diffPonit.y + curPoint.y;
			this.move(movePonit.x, movePonit.y);
		},
		handleEnd(ev) {
			// console.log('end', ev);
			if (!isTouchMove) return;

			//  更新坐标原点
			var touch = ev.changedTouches[0];

			curPoint.x += touch.pageX - startPoint.x;
			curPoint.y += touch.pageY - startPoint.y;

			// 重置
			isTouchMove = false;
		},
		move(x, y) {
			x = x || 0; // 没有传就是0
			y = y || 0;
			this.xMove = x;
			this.yMove = y;
			// translate3d	(tx,ty,tz)	在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.touch {
	position: fixed;
	right: 20px;
	bottom: 20px;
	 45px;
	height: 45px;
	/* 知识点
		line-height是行高，针对的对象是文字，height针对的是容器，
		也就是高度，当height和line-height值相同时会居中，
		当line-height值小于height时文字向上移动，反之向下移动。
		 */
	line-height: 45px; /* 文字垂直居中 */
	text-align: center; /* 水平居中 */
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	color: #fff;
	font-size: 30px;
	/* 去除标签点击事件高亮效果 */
	-webkit-tap-highlight-color: transparent;
	/* 使用transform: translate3d 处理性能高 GUP */
}
</style>