原 uniapp实现悬浮按钮可拖拽

版权声明：本文为博主原创文章，请尊重他人的劳动成果，转载请附上原文出处链接和本声明。
本文链接：https://www.91mszl.com/zhangwuji/article/details/1446

一：uniapp实现悬浮按钮可拖拽

1.1）代码如下

<template>
	<view>
		
		<button class="float-button" hover-class="hover-btn-bg" :style="{right: right + 'px', bottom: bottom + 'px'}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<uni-icons type="mic" size="40px" color="#fff" />
		</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    startX: 0,
			    startY: 0,
			    moveX: 0,
			    moveY: 0,
			    right: 20,
			    bottom: 100
			};
		},
		onLoad() {
			
		},
		methods: {
			touchStart(e) {
				this.startX = e.touches[0].clientX
				this.startY = e.touches[0].clientY
			},
			touchMove(e) {
				this.moveX = e.touches[0].clientX - this.startX
				this.moveY = e.touches[0].clientY - this.startY
				this.right -= this.moveX
				this.bottom -= this.moveY
				this.startX = e.touches[0].clientX
				this.startY = e.touches[0].clientY
			},
			touchEnd(e) {
			  // do something
			}
		}
	};
</script>

<style lang="scss">
	.float-button {
		position: fixed;
		right: 15px;
		bottom: 110px;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		background: #39b54a;
		text-align: center;
		display: flex;
		align-items:center;
		justify-content: center;
		box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
		z-index: 999;
	}
	.hover-btn-bg{
		background-color: green;
		color: #fff;
	}
</style>

1.2）效果图如下

参考资料：

https://blog.csdn.net/qq_35230125/article/details/130937318