我们的需求是做一个可拖动的菜单，类似于苹果手机浮动的home按钮，整个页面内都是可以拖拽的。
现在的问题是我用了拖拽组件之后，设置了z-index是高于页面层级的，导致整个页面内部所有点击事件都不生效。
<view class="page"> 这里是页面所有内容的代码 page没有设置层级 所以被drag-wrap挡住 无法执行点击事件，如果设置page层级高于drag-wrap,则无法执行拖拽事件 </view>
<view class="drag-wrap"> <movable-area style="height: 100%; width: 100%; "> <movable-view class="drag-view" bindtap='changeBtnViewState' disabled="{{disabledMenu}}" x="{{x}}" y="{{y}}" direction="all"> <view class="menu-view">菜单</view> <view class="btn-view hide{{showBtnView?'show':''}}" > <button class="menu-btn btn-openApp" open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button> <button class='menu-btn btn-goIndex'>首页</button> </view> </movable-view> </movable-area></view>
|
.drag-wrap{ width:100%; height: 100%; position: fixed; z-index:999; top:0;}.drag-view{ width:50px; height:50px;}.menu-view{ width:50px; height:50px; background: orange; color:#fff; line-height: 50px; text-align: center; border-radius:50%; position: absolute; bottom:0; right:0;} |
在别处看到的，对我做的有效果。但是movable-area高度设置为100%后，会拖动到导航栏里面去，这怎么解决？
movable-area 上加 pointer-events: none。
movable-view 上加 pointer-events: auto。
老哥稳
乍一看以为是没什么用，结果加到css里还真的可以，想知道原理是什么
+1