【无标题】

小程序悬浮按钮MOVABLE-AREA实现及解决按钮图层遮罩问题

movable-area
可拖动区域

由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了movable-area组件。
movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。
即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。
当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。
movable-view的规范另见movable-view。

<template>
<movable-area class="movableAreaTask" style="width: 100%;height: 100%;top: 50px;">
			<movable-view inertia x="`${screenWidth * 0.8}`" y="`${screenHeight * 0.2}`" direction="all"  
				class="addTaskBtn" @tap="skipTo" data-type="task">
				+
			</movable-view>
		</movable-area>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				screenWidth: "",
				screenHeight: ""
			}
		},
		mounted() {

			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.windowWidth;
					this.screenHeight = res.windowHeight;
					console.log("30", this)
				},
				fail: (res) => {
					console.log("fail", res)
				}
			})
		},
		methods: {
			skipTo: function(e) {
				console.log("你选中我啦!!!")
				// wx.navigateTo({
				// 	url: '/pages/{0}/{1}'.format(type, type),
				// })
			},
			newCom() {
				uni.navigateTo({
					url: "../jichuzujian/index"
				})
			},
			okGo(e) {
				console.log("感谢翻牌子!!")
			}
		}

	}
</script>

<style>
	.movableAreaTask {
		position: fixed;
		right:0;
	}

	.addTaskBtn {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: rgb(230, 230, 230);
		color: white;
		text-align: center;
		line-height: 50px;
		font-size: 32px;
	}

	movable-view {
		pointer-events: auto;
	}

	movable-area {
		pointer-events: none;
	}
</style>

实现方案

1）通过使用movable-area、movable-view实现滑动
多个悬浮按钮可在movable-area下添加多个movable-view标签
2）限制按钮在屏幕可用范围内
movable-area必须指定区域大小，即悬浮按钮的可移动区域。
screenHeight、screenWidth可根据wx.getSystemInfo获取，自己可根据页面已有元素计算按钮可移动区域大小。
3）解决按钮图层遮罩问题

movable-view {
		pointer-events: auto;
	}

movable-area {
		pointer-events: none;
	}

遮罩问题是由movable-view设置的移动区域引起的，设置为 pointer-events: auto; 表示可穿透当前层，使图层下的点击生效。