技術標籤：微信小程式

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