微信小程序 + uni-app可移动悬浮图标按钮_uniapp微信小程序悬浮菜单实现

一，可拖动的悬浮按钮的视频演示

二，主要代码

1.html代码

<movable-area class="move-area">
	<movable-view class="move-button" :x="area.x" :y="area.y" direction="all" @change="onChange" damping="30" >
	   <image src="../../static/logo.png" style="width: 100%; border-radius: 50%;" mode="widthFix"></image>
	</movable-view>
</movable-area>

2.js代码（设置x和y的初始值）

const area = ref({
  x:0,
  y:340
});
// 实现只悬浮于屏幕两边
const onChange = (e) => {
	area.value.y = e.detail.y
	uni.getSystemInfo({ //获取屏幕信息 宽度
	   success: (res) => {
		if ( e.detail.x > Number(res.windowWidth / 2) ) {
			area.value.x = Number(res.windowWidth);
			}else {
			area.value.x = 0
		  }
		},
	});
}

3.css样式代码

.move-area {
	  position: fixed; //固定定位，使其在整个屏幕内移动
		height: 100%;
		width: 100%;
		.move-button {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 100rpx;
		  height: 100rpx;
		  pointer-events: auto;
		  border-radius: 50%;
		}
	}

 uni-app官网查看更多设置：movable-view | uni-app官网 (dcloud.net.cn)