movable-area实现可拖动悬浮图标
微信官方文档地址
实现代码
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