zhangdaren
zhangdaren
  • 发布:2022-01-09 20:24
  • 更新:2022-10-20 16:38
  • 阅读:2115

使用movable-area组件实现全屏可自由拖动按钮

分类:uni-app

由于项目中需要使用到这个功能,经过探索发现了前人各种实现,也发现了movable-area组件。

但是有个问题,movable-area必须要全屏大小才行,不然拖动范围很小,而movable-area全屏后,就会把底下的其他组件遮住,而不遮住的话,又拖不动了按钮(被其他的组件遮住了),看似是死循环,经过研究,得以解决,代码如下:

<movable-area style="pointer-events: none;">  
    <movable-view  direction="all" style="pointer-events: all;">  
        <view>我是按钮</view>  
    </movable-view>  
</movable-area>

其中的核心就是将movable-area的样式pointer-events设置为none,即这个全屏区域将不会响应事件了,然后再将里面的按钮movable-viewpointer-events设置为all,即开启它的事件响应,于是问题得以顺利解决~

仅供参考,希望可以帮助到大家~

2 关注 分享
Kytrun x***@vip.qq.com

要回复文章请先登录注册

zhangdaren

zhangdaren (作者)

回复 z***@t-chip.com.cn :
哪里不行?有demo?我之前测试app ok呀。
2022-10-20 16:38
z***@t-chip.com.cn

z***@t-chip.com.cn

这个在app-nvue那边无法达到预期目的,在小程序那边可以,不知官方是否知道这个问题,或者说如何解决- -
2022-10-19 15:45
zhangdaren

zhangdaren (作者)

回复 小小菜76055421 :
fixed就行啦
2022-10-13 10:43
小小菜76055421

小小菜76055421

大佬,怎么让movable-view不随着页面滑动而动
2022-09-08 17:01