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

先上效果图

图1

实现方案

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代码

constapp = getApp()

Component({ 

options: {   

addGlobalClass:true, 

},

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; 表示可穿透当前层，使图层下的点击生效。

具体功能，请微信搜索  “任务管理小工具” 查看效果！