小程序movable-area置于顶层遮盖下方元素无法操作的解决方案

150 阅读1分钟

小程序项目中有个需求,右下角消息按钮可以在页面中随意拖动, movable-area充满整个页面,置于所有元素顶层导致下方的所有元素无法操作!!! 下方元素无法实现点击事件:

<movable-area>
    <movable-view x="{{300}}" y="{{600}}" direction="all" class="message-tips" onTap="toMessageNotify">
      <view class="iconfont icon-xiaoxizhongxin u_34 message-icon u_white"></view>
    </movable-view>
</movable-area>

查询资料得知可以给这两个标签增加两个样式即可!!!

movable-view {
   pointer-events: auto;
}
movable-area {
  pointer-events: none;
}
pointer-events: none;表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西
pointer-events:auto;鼠标不会穿透当前层