https://blog.csdn.net/mr_chen95/article/details/79261987

在一些情况下,我们需要对mapvideocanvascamera这些微信小程序的原生控件,进行自定义,比如在camera上添加一个矩形线框作为拍照区域,这时我们就需要使用到cover-view这个控件。

cover-view的使用方法与view基本一致,以下是一些注意点:

  1. 在同一父容器中,要在原生控件上添加布局,只能用cover类的控件,因为原生控件的层级处于顶层,即使将非cover类的控件的z-index设置到10000,依然层级在原生控件之下,被覆盖。
  2. 在原生控件cover-view作为父容器时,不能使用其他控件嵌套作为子元素,只能使用cover类的控件,例如:cover-viewcover-image 。

<cover-view class="img-wrap">

<cover-image class="img" src="/pages/web/images/dialog.png"/>

</cover-view>

.img-wrap { position: relative; width: 100%; padding-top: 42.3333%; }

.img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

小程序填坑之路(二):cover-view的更多相关文章

  1. 微信小程序填坑之路其一:wx.request发送与服务端接受

    一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...

  2. 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)

    因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...

  3. 微信小程序填坑之路

    图片处理 三个小方法仅供参考1.将图片转成base64编码,可以使用代码来转换,当然我才不愿意特意写代码转,我懒,献上一个在线图片转base64的地址:http://tool.css-js.com/b ...

  4. [转]微信小程序填坑之路之使用localhost在本地测试

    本文转自:http://www.wxappclub.com/topic/798

  5. 微信小程序填坑之旅一(接入)

    一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...

  6. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  7. 小程序填坑:2018最新getPhoneNumber功能详解

    本篇博客主要详解getPhoneNumber组件的功能,填补网上那些到处是漏洞的博客.加上小程序官方本身也是满满的漏洞. 惯例先上总纲: ##主要内容 1.前端页面组件书写 2.JS内组件用法 3.接 ...

  8. 微信小程序填坑之旅(1)-app.js中用云开发获取openid,在其他页上用app.globaldata.openid获取为空

    参考:小程序如何在其他页面监听globalData中值的变化?https://www.jianshu.com/p/8d1c4626f9a3 原因就是:app.js没执行完时,其他页已经onload了, ...

  9. 微信小程序填坑---小程序支付

    因为公司刚刚重新做了网站,所以也吧公众号和小程序提上了日程,在公众号里面没有什么问题,直接按照官方文档进行代码编写.调试,然后就解决了公众号内支付的问题. 因为小程序提供了<webview> ...

随机推荐

  1. IT人生的价值和意义 感觉真的有了

     为了做新闻APP,我居然短短一个月利用业余时间做了: 一个通用新闻采集器. 一个新闻后台审核网站. 一个通用采集器下载网站. 一个新闻微网站. 一个新闻APP, 而且还给新闻微网站和新闻 APP练就 ...

  2. C# 文件读写系列二

    读取文件原则上非常简单,但它不是通过FileInfo和DirectoryInfo来完成的,关于FileInfo和DirectoryInfo请参考C# 文件操作系列一,在.Net Framework4. ...

  3. Path;Paths和Files;FileVisitor

    package filet; import java.io.FileOutputStream; import java.nio.file.FileStore; import java.nio.file ...

  4. Java reflect 反射 1

    1 反射的概述 反射含义:可以获取正在运行的Java对象. JAVA反射机制是在运行状态中,对于任意一个类,都能够得到这个类的所有属性和方法; 对于任意一个对象,都能够调用它的任意一个方法; 这种动态 ...

  5. Tomcat源码分析——启动与停止服务

    前言 熟悉Tomcat的工程师们,肯定都知道Tomcat是如何启动与停止的.对于startup.sh.startup.bat.shutdown.sh.shutdown.bat等脚本或者批处理命令,大家 ...

  6. 怎么让一段xml被识别为字符串

    public static String decodeString(String strData) { strData = replaceString(strData, "<" ...

  7. [javaSE] GUI(jar包双击运行)

    首先应该在java文件中定义包名,package 包名 带包编译成class文件 切换到目录下,使用jar -cvf xx.jar 包名,就是把那个包放到xx.jar包里面 此时双击会报错,找不到要执 ...

  8. [javaSE] GUI(练习-列出指定目录内容)

    获取Frame对象 获取TextField对象 获取TextArea对象 获取Button对象 调用Frame对象的add()方法,添加进去 调用TextField对象的getText()方法,可以获 ...

  9. 八、阻塞等待异步结果FutureTask

    一.简介 默认的异步任务有些难以控制,有时候我们希望在当前线程获取异步任务的结果.FutureTask可以帮助我们实现 JDK文档:http://tool.oschina.net/uploads/ap ...

  10. 七、spark核心数据集RDD

    简介 spark RDD操作具体参考官网:http://spark.apache.org/docs/latest/rdd-programming-guide.html#overview RDD全称叫做 ...