uniapp悬浮图标支持拖动支持微信小程序

话不多说直接上干货

1.首先你要写一个组件，这个组件你全局引用到时候想用哪里就用哪里。我先把效果图先搞出来看看

 2.这个悬浮的按钮其实是一个组件下边是代码你可以直接copy过去

<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all">
				<image src="../../static/shouye.png"></image>
			</movable-view>
		</movable-area>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				x: 320,		//x坐标
				y: 520,		//y坐标
			}
		}
	}
</script>
 
<style lang="scss">
	$all_width: 96rpx;
	$all_height:96rpx;
 
	.movable-area {
		height: 100vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none;		//此处要加，鼠标事件可以渗透
		z-index: 9999999999999999;
		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto;	//恢复鼠标事件
			image {
				width: $all_width;
				height: $all_height;
			}
		}
	}
</style>

3.在我的代码中这个组件名字叫first_page,现在你需要全局定义一下这个组件

4.最后你就在你想用的页面中添加就行了

 <!--悬浮按钮组件引用-->
    <view @click="newClothes">
      <first_page></first_page>
    </view>

 5.这里我写的是跳转的函数，我就不展示了！有啥问题可以随时留言或者@我

 上述代码是在uniapp中的源码，可以直接使用，另外你自己换成自己需要的地址就行了，另外如果有疑问可以直接@我联系我如果对你有用麻烦您点个关注谢谢，非常感谢！