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

<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. pandas DataFrame(5)-合并DataFrame与Series

    之前已经学过DataFrame与DataFrame相加,Series与Series相加,这篇介绍下DataFrame与Series的相加: import pandas as pd s = pd.Ser ...

  2. [HDFS Manual] CH4 HDFS High Availability Using the Quorum Journal Manager

    HDFS High Availability Using the Quorum Journal Manager HDFS High Availability Using the Quorum Jour ...

  3. Failed to execute 'write' on 'Document'动态载入的js不能执行write

    统计代码一般都是直接一个标签,插入js,标签放在哪里,统计图表就放在哪里! 我现在是稍微改了一下,我自己加了一点js,在页面所有元素都加载完成之后我再动态的把统计js插入到我需要的地方. 统计代码的s ...

  4. [2]朝花夕拾-JAVA注解、PHP注解?

    一.Java注解概述 注解,也被称为元数据,为我们在代码中添加信息提供了一种形式化的方法,是我们可以在稍后某个时刻非常方便地使用这些数据. 注解在一定程度上是把元数据与源代码文件结合在一起,而不是保存 ...

  5. Java对象序列化和反序列化的工具方法

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  6. JS 详解对象的继承

    在学习这篇博文前,请先移步我的另外一篇博文:JS 一张图理解prototype.proto和constructor的关系,先弄清楚“原型链”,这样对于理解继承会非常有效. 注意:博文中提到的“属性”, ...

  7. 数据库更新锁WITH UPDLOCK

    今天因为并发的问题,又讨论了一遍.之前以为同时两个线程开启,线程A加了更新锁,线程B没有加,线程A更新后,线程B也会继续下去代码.但是今天测试了一下,原来线程A更新后(解锁),线程B将不会继续,会出现 ...

  8. Centos6.8 安装spark-2.3.1 以及 scala-2.12.2

    一.Spark概述    Spark 是一个用来实现快速而通用的集群计算的平台. 在速度方面,Spark 扩展了广泛使用的 MapReduce 计算模型,而且高效地支持更多计算模式,包括交互式查询和流 ...

  9. ZooKeeper注册中心安装详细步骤(单节点)

    安装 Dubbo 注册中心 Dubbo 建议使用 Zookeeper 作为服务的注册中心. 注册中心服务器(192.168.3.71)配置,安装 Zookeeper: 1. 修改操作系统的/etc/h ...

  10. Java课程寒假之开发记账本软件(网页版)之二

    一.实现基础功能之一(记账) 一个记账本最基础之一的功能就是记账,所以也是首先要解决的问题,我选择了上学期使用的MySQL数据库来对账本进行存储. 我选择记账的方法是分开记账,就是支出放在一个表,收入 ...