评论

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

小程序悬浮按钮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; 表示可穿透当前层,使图层下的点击生效。

最后一次编辑于  2023-11-19  
点赞 5
收藏
评论

5 个评论

  • A捷豹空压机、真空泵、冷干机保养
    A捷豹空压机、真空泵、冷干机保养
    2021-01-30

    movable-view {

      pointer-events: auto;

    }

    movable-area {

     pointer-events: none;

    }

    完美决绝不能点击 问题。

    2021-01-30
    赞同 1
    回复
  • 玖千柒
    玖千柒
    2023-10-27

    两段css代码都要有不知道为啥不冲掉

    2023-10-27
    赞同
    回复
  • 独坐空山后
    独坐空山后
    2021-10-09

    我设置了area 是 top:88px的,但是 view还是可以移动到最上面,脱离了可移动区域了,但是我没有设置可以脱离的,可以解答一下吗


    2021-10-09
    赞同
    回复
  • 我们不一样
    我们不一样
    2021-09-21

    用户移动结束后自动回到屏幕的左侧或者右侧

    具体实现方案:https://mp.weixin.qq.com/s/tUOl1ix1uRhO5aW3cLSf9w

    或者关注公众号:【编程经验共享】公众号或者【php经验共享】公众号

    2021-09-21
    赞同
    回复
  • 子非鱼LX
    子非鱼LX
    2020-08-25

    请发个片段,谢谢

    2020-08-25
    赞同
    回复 1
    • 恒
      2020-08-26
      文章已经给出,复制粘贴,稍微改下就能用
      2020-08-26
      回复
登录 后发表内容