微信小程序实现可移动悬浮按钮

2020-06-08  本文已影响0人  代码使劲儿搬

实现方案:可以利用微信小程序的内置组件轻松实现!
1.将整个屏幕用movable-area组件覆盖,
2.在movable-area内部添加一个movable-view实现自由滑动。
3.重点:CSS属性 pointer-events 。
代码奉上:
wxml:

<movable-area class="movable-area">
   <movable-view class="movable-view" direction="all">
   </movable-view>
 </movable-area>

wxss:

 .movable-area{
    pointer-events:none;// 这个属性设置为none,让所有事件穿透过去
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .movable-view{ 
    pointer-events:auto;// 重设为auto,覆盖父属性设置
    height: 50px;
    width: 50px;
    background: red;
  }

核心代码就这么点,业务实现就看你们自己了

上一篇 下一篇

猜你喜欢

热点阅读