小程序悬浮按钮movable |
您所在的位置:网站首页 › 悬浮按钮图标 › 小程序悬浮按钮movable |
先上效果图 实现方案 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; 表示可穿透当前层,使图层下的点击生效。 具体功能,可以扫码体验! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |