小程序悬浮按钮movable-area实现及解决按钮图层遮罩问题
先上效果图 [图片] 实现方案 1）通过使用movable-area、movable-view实现滑动 2）限制按钮在屏幕可用范围内 3）解决按钮图层遮罩问题 作为多个页面公用按钮，新建组件components更合适，先上代码。 wxml代码
+
?
wxss代码 .movableAreaTask{
position: fixed;
right: 0;
}
.addTaskBtn{
width: 50px;
height: 50px;
border-radius: 50%;
background-image: var(--gradualBlue);
color: white;
text-align: center;
line-height: 50px;
font-size: 32px;
}
.helperBtn{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgb(230, 230, 230);
color: #0081FF;
text-align: center;
line-height: 40px;
font-size: 32px;
}
movable-view {
pointer-events: auto;
}
movable-area {
pointer-events: none;
}
JS代码 const app = getApp()
Component({
options: {
addGlobalClass: true,
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
screenWidth: app.globalData.screenWidth,
screenHeight: app.globalData.screenHeight
},
/**
* 组件的方法列表
*/
methods: {
skipTo: function(e){
let type = e.currentTarget.dataset.type
wx.navigateTo({
url: '/pages/{0}/{1}'.format(type, type),
})
}
}
})
1）通过使用movable-area、movable-view实现滑动 多个悬浮按钮可在movable-area下添加多个movable-view标签，没有必要建多个movable-area，而引起遮罩问题，后面会讲！ 2）限制按钮在屏幕可用范围内 movable-area必须指定区域大小，即悬浮按钮的可移动区域。 screenHeight、screenWidth可根据wx.getSystemInfo获取，自己可根据页面已有元素计算按钮可移动区域大小。 3）解决按钮图层遮罩问题 现在应该可以正常点击了，但是会遮罩底层操作，其实上面css中已经给出了解决 movable-view {
pointer-events: auto;
}
movable-area {
pointer-events: none;
}
其中，遮罩问题是由movable-view设置的移动区域引起的，设置为 pointer-events: auto; 表示可穿透当前层，使图层下的点击生效。
