先上效果图
实现方案
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; 表示可穿透当前层,使图层下的点击生效。
movable-view {
pointer-events: auto;
}
movable-area {
pointer-events: none;
}
完美决绝不能点击 问题。
两段css代码都要有不知道为啥不冲掉
我设置了area 是 top:88px的,但是 view还是可以移动到最上面,脱离了可移动区域了,但是我没有设置可以脱离的,可以解答一下吗
用户移动结束后自动回到屏幕的左侧或者右侧
具体实现方案:https://mp.weixin.qq.com/s/tUOl1ix1uRhO5aW3cLSf9w
或者关注公众号:【编程经验共享】公众号或者【php经验共享】公众号
请发个片段,谢谢