微信小程序movable-area制作悬浮按钮_微信小程序 悬浮按钮

效果图如上，在屏幕上显示一个可以拖动的悬浮按钮

WXML代码

  <movable-area class="movable-area" >
  <movable-view class="movable-view" direction="all" bindtap='gologin'>
    <image src="http://218.75.219.243:8080/shuxue/暂停.png"></image>
  </movable-view>
 </movable-area>

movable-area 代表可移动的区域，movable-view代表可以移动的模块

WXSS代码

.movable-area{
  pointer-events:none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  left:  0%;
  top: 0%;
}
 
.movable-view{ 
  pointer-events:auto;
  height: 50px;
  width: 50px;
  left:  80%;
  top: 70%;
 
}

 movable-area 用了绝对定位, z-index: 100;显示在最上层，相当于在原有的页面上铺上一层可以移动的区域，注意为了不影响原有页面上的事件触发，使用 pointer-events:none;  而movable-view 用  pointer-events:auto; 来优先触发事件