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

<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. sublime Text3基本配置记录+python

    环境:ubuntu 内容:基本配置+python开发实用插件 一. 激活 注册码 Michael Barnes Single User License EA7E- 8A353C41 872A0D5C ...

  2. MPU6050带字符驱动的i2c从设备驱动2

    #include <linux/kernel.h> #include <linux/module.h> #include <linux/init.h> #inclu ...

  3. final可以修饰类、属性、方法。

      当用final修饰类的时候,此类不可被继承,即final类没有子类.这样可以用final保证用户调用时动作的一致性,可以防止子类覆盖情况的发生.   当利用final修饰一个属性(变量)的时候,此 ...

  4. Linux 开机启动顺序_005

    ***了解Linux开机启动顺序之前先了解一下Linux运行级别,通过inittab配置文件查看运行级别的定义: [root@oldboy ~]# cat /etc/inittab # Default ...

  5. [原创]Fashion汽车定位器拆解

    随着共享单车的爆发增长,定位方案被彻底激活.当下主流的共享单车都采用了MTK2503的方案(后续再详细分解),本文针对某商城热卖的汽车定位器进行拆解分析. 第一部分,定位器外观. 第二部分,拆解开壳, ...

  6. js插件解读

    1.calendar.js:日期插件:2.html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题的js文件:3.jquery.js里的代码是没有进 ...

  7. Android学习Scroller(五)——具体解释Scroller调用过程以及View的重绘

    PS: 该篇博客已经deprecated,不再维护.详情请參见  站在源代码的肩膀上全解Scroller工作机制  http://blog.csdn.net/lfdfhl/article/detail ...

  8. linux 使用不安全的sprintf函数,存储字符越界导致程序莫名崩溃问题

    linux c++编程 问题背景: 在处理一个公共模块的代码中,其中有以下代码片段 //代码片段-组合一组字符串并存放到szSignKey数组中 ] = {}; sprintf(szSignKey, ...

  9. jstat命令详解

    Jstat是JDK自带的一个轻量级小工具.全称“Java Virtual Machine statistics monitoring tool”,它位于java的bin目录下,主要利用JVM内建的指令 ...

  10. HTML使用CSS样式的方法

      在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p ></p> 2.嵌入式 <style type="text/css"> ...