公告列表
公告列表
收藏
回答

movable-view层级太高 导致页面事件无法点击

我们的需求是做一个可拖动的菜单，类似于苹果手机浮动的home按钮，整个页面内都是可以拖拽的。

现在的问题是我用了拖拽组件之后，设置了z-index是高于页面层级的，导致整个页面内部所有点击事件都不生效。

<view class="page">

这里是页面所有内容的代码 page没有设置层级 所以被drag-wrap挡住 无法执行点击事件，如果设置page层级高于drag-wrap,则无法执行拖拽事件

</view>

<!-- drag start -->

<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 end -->



.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;
}



回答关注问题邀请回答
收藏

3 个回答

  • Asphyxia
    Asphyxia
    2018-08-26

    在别处看到的，对我做的有效果。但是movable-area高度设置为100%后，会拖动到导航栏里面去，这怎么解决？

    movable-area  上加 pointer-events: none。

    movable-view  上加 pointer-events: auto。


    2018-08-26
    有用 15
    回复 6
    • 欢乐马
      欢乐马
      2018-09-01

      老哥稳

      2018-09-01
      赞
      回复
    • 2018-09-05

      乍一看以为是没什么用，结果加到css里还真的可以，想知道原理是什么

      2018-09-05
      赞
      回复
    • 杨求明
      杨求明
      2022-06-27
      乍一看以为是没什么用，结果加到css里还真的可以
      2022-06-27
      赞
      回复
    • mars
      mars
      2023-06-06
      正愁着呢，突然就看到楼主在发光...
      2023-06-06
      赞
      回复
    • Async
      Async
      2024-04-19
      你简直就是我的救星
      2024-04-19
      赞
      回复
    查看更多(1)
  • 啊胖
    啊胖
    2018-08-15

    +1


    2018-08-15
    有用
    回复
  • 再见，电脑崽
    再见，电脑崽
    2018-08-15

    你drag-wrap的宽和高没必要100%，浮动的菜单是多大就多大，浮动菜单接收touchStart、touchEnd、touchMove三个事件来控制菜单的位置。

    2018-08-15
    有用
    回复 4
    • Zero
      Zero
      2018-08-15

      如果drag-view宽高不设置100%，那movable-area 可拖拽范围启不就变了吗？

      2018-08-15
      赞
      回复
    • 再见，电脑崽
      再见，电脑崽
      2018-08-16回复Zero

      用fixed来控制菜单位置吖！~无需movable-area

      2018-08-16
      赞
      回复
    • 再见，电脑崽
      再见，电脑崽
      2018-08-16回复Zero

      或者监听手势事件，当手指在菜单上按下的时候，才将drag-view设置为100%，手指离开后变小。

      2018-08-16
      赞
      回复
    • Zero
      Zero
      2018-08-16

      API有句话是这个 ‘注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。’  所以不太懂你说的无需movable-area是什么意思？  刚刚试了下监听手势，但是当touchend后按钮菜单又回回到原点，并不是我拖拽的位置。郁闷了。。。

      2018-08-16
      赞
      回复
请 登录 后发表内容
相关文档