movable-area实现可拖动悬浮图标

movable-area实现可拖动悬浮图标

微信官方文档地址

movable-view的可移动区域

实现代码

1.wxml

<movable-area bindtap='gotoHome'>
	<movable-view x="{{x}}" y="{{y}}" direction="all">
		<image src="../../../../images/gohome.png"></image>
	</movable-view>
</movable-area>

2.wxss

movable-area{
	width:100%;
	height:100%;
	position:fixed;
	pointer-events: none;
}
movable-view{
	width:170rpx;
	height:50rpx;
	pointer-events: auto;
}

3.js

data:{
	x: 0,
	y: 0,
 }

需自己控制初始位置

注意点

悬浮图标可拖动，设置的移动范围一般为整个屏幕，再此过程中需进行以下设置，否则悬浮窗口下方内容是无点击效果

movable-area 需设置 pointer-events: none
movable-view 需设置 pointer-events: auto