小程序项目中有个需求,右下角按钮可以在页面中随意拖动,此时查看文档找到了一个自带的标签可以实现此功能,代码如下

<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
</movable-area>

但是使用之后有个问题,

movable-area充满整个页面,置于所有元素顶层导致下方的所有元素无法操作,查询资料得知可以给这两个标签增加两个样式即可
movable-view {
pointer-events: auto;
}
movable-area {
pointer-events: none;
}
pointer-events: none;表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西
pointer-events:auto;鼠标不会穿透当前层

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

  1. 小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

    小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

  2. 微信小程序点击返回顶层实现方法

    最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" sc ...

  3. 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...

  4. 教你如何一键反编译获取任何微信小程序源代码(图形化界面,傻瓜式操作)

    一键获取微信小程序源代码 Tips: 一键获取微信小程序源码, 使用了C#加nodejs制作 直接解压在D盘根目录下后就可以使用 将小程序文件放到 wxapkg目录下3 这个目录下有一些demo 可以 ...

  5. 【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    wx:if 与 hidden 都可以控制微信小程序中元素的显示与否. 区别: wx:if 是遇 true 显示,hidden 是遇 false 显示. wx:if 在隐藏的时候不渲染,而 hidden ...

  6. 小程序map组件默认层级最高,并且不能设置的解决方案

    map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些 ...

  7. 微信小程序跳一跳辅助程序(手动版)

    最近,微信官方推出了demo小程序游戏<跳一跳>,这个游戏操作简单,容易上手,却又不容易获得高分,受到很多人的喜爱(emm...这游戏有毒).自己也尝试了玩了几次,作为一个手残+脑残的资深 ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序云开发

    什么是云开发? 云开发是由腾讯云联合微信团队为开发者提供的 包含 云函数.云数据库和云文件存储能力的后端云服务 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 A ...

随机推荐

  1. Python类中的装饰器在当前类中的声明与调用

    [本文出自天外归云的博客园] 我的Python环境:3.7 在Python类里声明一个装饰器,并在这个类里调用这个装饰器.代码如下: class Test(): xx = False def __in ...

  2. 分析“HTTP500内部服务器错误”解决方法

    系统中出现的一些故障是用户最不想看到的,有时候遇到一些故障都到折腾个大半天才能够搞定.打开网站出现了HTTP500内部服务器错误的提示,无法法查看错误的详细信息,用户也没办法根据具体的问题来解决,这对 ...

  3. matlab与python读取tiff文件

    matlab t=Tiff('IMG_3952.TIF', 'r+'); k = 1; t.setDirectory(k); img{k} = t.read(); src = img{1}; dst( ...

  4. netty 粘包的解决策略

    粘包问题的解决策略      由于底层的 TCP 无法理解上层业务数据,所以在底层是无法保证数据包不被拆分和重组的 , 这个问题只能通过上层的应用协议栈设计来解决,根据业界主流的协议的解决方案, 可以 ...

  5. 24小时学通Linux内核之向内核添加代码

    睡了个好觉,很晚才起,好久没有这么舒服过了,今天的任务不重,所以压力不大,呵呵,现在的天气真的好冷,不过实验室有空调,我还是喜欢待在这里,有一种不一样的感觉,在写了这么多天之后,自己有些不懂的页渐渐的 ...

  6. oracle 聚合函数 LISTAGG ,将多行结果合并成一行

    LISTAGG( to_char(Item_Category_Name), ',') WITHIN GROUP(ORDER BY Item_Category_Name)  -- 将 Item_Cate ...

  7. wampserver2.2e-php5.3.13 版本 增加 php7 支持

    公司需要升级PHP版本至PHP7,对于用惯了wamp的来说,添加一下PHP扩展应该是很容易的,看我以前的文章(WampServer自己DIY添加apache.php.mysql版本). 不过再配置的当 ...

  8. 语法的二义性和token的超前扫描

    语法的二义性 JavaCC不能分析所有EBNF描述的语法,因为EBNF描述的语法本质上具有二义性的情况.C语言中if语句用JavaCC的EBNF可以是如下描述: "if" &quo ...

  9. Qt编写自定义控件5-柱状温度计

    前言 柱状温度计控件,可能是很多人练手控件之一,基本上都是垂直方向展示,底部一个水银柱,中间刻度尺,刻度尺可以在左侧右侧或者两侧都有,自适应分辨率改动,有时候为了美观效果,可能还会整个定时器来实现动画 ...

  10. VC++ 字符串Dword、LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR

            类   型     MBCS  UNICODE TCHAR char char WCHAR wchar_t wchar_t LPSTR char* char* LPCSTR const ...