小程序项目中有个需求,右下角消息按钮可以在页面中随意拖动, 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;鼠标不会穿透当前层