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

先上效果图

实现方案

1）通过使用movable-area、movable-view实现滑动

2）限制按钮在屏幕可用范围内

3）解决按钮图层遮罩问题

 

作为多个页面公用按钮，新建组件components更合适，先上代码。

wxml代码

<movable-area class= "movableAreaTask" style="height:{{screenHeight-50}}px;width:{{screenWidth}}px;top:50px">
 <movable-view inertia x="{{screenWidth * 0.8}}" y="{{screenHeight * 0.8}}" direction="all" class="addTaskBtn" bindtap="skipTo" data-type="task">
    +
 </movable-view>
 <movable-view inertia x="{{screenWidth * 0.9}}" y="0" direction="all" class="helperBtn" bindtap="skipTo" data-type="helper">
    ?
  </movable-view>
</movable-area> 

 

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

具体效果，可以扫码体验！