【uniapp小程序】视图容器cover-view

news2025/7/11 15:14:56

🍒观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列又更新新文章啦,今天的内容是uniapp小程序的视图容器,cover-view
🍒准备好了吗?那我们就发车啦,赶紧拿起小本本把笔记做起来吧!

一,cover-view

首先我们需要知道,cover-view是可以覆盖在原生组件上的文本视图,也就是cover-view组件的层级高于原生组件,就像是原生组件的层级高于前端组件一样,如flash层级就高于div的层级。

部分组件,比如mapvideotextareacanvas是通过原生组件实现的,原生组件无法被前端组件覆盖,程序员需要找到能覆盖它们的存在,这也是设计出cover-view的原因。

这里牛牛先来解释一下原生组件:

组件化开发就类似于函数封装,有利于代码的复用,提高程序员的效率和代码的整洁性。或者说类似于一个模板,里面的方法,我们可以直接调用,这也是原生组件的思想和实现原理,原生组件比div什么的相比,就高级在于它不仅有视图,还有逻辑。比如map,能把个地图传进来,还能识别位置。

uniapp日常开发中,我们也会经常的用到cover-view覆盖原生组件的性质,举个小例子,我们需要实现一个在video上添加一个控制播放的按钮,这时候我们是不是就可以用cover-view来做了?

<video class="vd" :controls="false">
	<cover-view class="controll" @click='click'></cover-view>
</video>

然后在用个子绝父相,调整一个按钮的位置,就很轻松的搞定啦。

1.1 基础知识

注意:

cover-view组件支持的事件:click

可以覆盖的组件有mapvideotextareacanvas

属性:

scroll-top,设计来设置顶部的滚动偏移量的,需要注意的是,它仅在设置了overflow-y: scroll后,才会生效。


1.2 各平台差异

在这里插入图片描述
app-nvue所有组件均为原生渲染,不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容,nvue里也实现了cover-view,作用于普通view一样。

微信小程序部分原生组件实现了同层渲染,在指定的基础库版本上,某些原生组件可无需使用cover-view覆盖

字节跳动小程序不需要cover-view,因其原生组件均实现了同层渲染。

360小程序不存在原生组件,无此概念。

cover-view 嵌套使用时,内部不可直接写文本节点,需要使用 cover-view 包裹。

1.3 不支持的CSS

position: fixed
opacity
overflow
padding
linebreak
white-space

注意:

nvue的cover-view不在上述限制中,它仅支持且全部支持nvue的所有css

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力!!!

债见~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406267.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

10Wqps 超高并发 API网关 架构演进之路

说在前面 在尼恩的&#xff08;50&#xff09;读者社群中&#xff0c;经常遇到一个 API网关 架构方面的问题&#xff1a; (1) 尼恩老师&#xff0c;最近公司我们在规划业务出口网关(目的&#xff0c;整合规范外部调用&#xff0c;如短信平台 mqtt 等) 我在做整理技术方案&…

智能车竞赛:Infineon TC264单片机使用总结快速入门

本文主要是为了备赛第十八届全国大学生智能车竞赛&#xff0c;基于逐飞开源库和芯片数据手册的一些学习总结&#xff0c;使用英飞凌官方的AURIX Development Studio开发环境。 正如STM32的开发方式有标准库和HAL库&#xff0c;Infineon单片机也有官方库&#xff0c;而逐飞开源…

阿里P8大牛用实例跟你讲明白“Java 微服务架构实战”

全文一共十五章&#xff0c;核心内容为SpringBoot、SpringCloud、Docker、RabbitMQ消息组件。其中&#xff0c;SpringBoot是SpringMVC 技术的延伸&#xff0c;使用它进行程序开发会更简单&#xff0c;服务整合也会更容易。SpringCloud 是当前微架构的核心技术方案&#xff0c;属…

Spring Cloud Alibaba 微服务1,系统架构演变 + Nginx反向代理与负载均衡

目录专栏导读一、系统架构演变二、什么是Nginx&#xff1f;三、servername匹配规则四、正向代理与反向代理1、正向代理2、反向代理3、LVS五、负载均衡策略1、轮询2、权重3、ip_hash4、least_conn5、url_hash6、fair7、小结六、动静分离七、URLRewrite专栏导读 &#x1f3c6;作者…

【Linux系统】进程概念

目录 1 冯诺依曼体系结构 2 操作系统(Operator System) 概念 设计OS的目的 定位 总结 系统调用和库函数概念 3 进程 3.1 基本概念 3.2 描述进程-PCB 3.2 组织进程 3.3 查看进程 3.4 通过系统调用获取进程标示符 3.5 进程状态 在了解进程概念前我们还得了解下冯诺…

MongoDB详解,用心看这篇就够了【重点】

1.1 MongoDB概述 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 它支持的数据…

业内人士真心话,软件测试是没有前途的,我慌了......

我在测试行业爬模滚打7年&#xff0c;从点点点的功能测试到现在成为高级测试&#xff0c;工资也翻了几倍。个人觉得&#xff0c;测试的前景并不差&#xff0c;只要自己肯努力。 我刚出来的时候是在鹅厂做外包的功能测试&#xff0c;天天点点点&#xff0c;很悠闲&#xff0c;点…

JS中的构造函数

构造函数 1.构造函数 创建一个构造函数&#xff0c;专门用来创建一个指定的对象的构造函数就是普通的函数&#xff0c;创建方式和普通函数没有区别&#xff0c;不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用方式不同 普通函数是直接调用的&#xff0c;而…

真题解析 | 2022数模美赛C题:股票投资策略

1、准备工作 1.1 题目背景 市场交易者频繁买卖波动性资产&#xff0c;目标是最大化其总回报。每次买卖通常都会有佣金。 两种这样的资产是黄金和比特币。 图 1&#xff1a;黄金每日价格&#xff0c;每金衡盎司美元。 资料来源&#xff1a;伦敦金银市场协会&#xff0c;2021 年…

javaScript实现动态规划(Dynamic Programming)01背包问题

&#x1f431; 个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门…

二十分钟带你了解JVM性能调优与实战进阶

ZGC 诞生原因 Java生态非常强大&#xff0c;但还不够&#xff0c;有些场景仍处于劣势&#xff0c;而ZGC的出现可以让Java语言抢占其他语言的某些特定领域市场。比如 谷歌主导的Android手机系统显示卡顿。证券交易市场&#xff0c;实时性要求非常高&#xff0c;目前主要是C主…

Day16【元宇宙的实践构想04】—— 元宇宙的安全

&#x1f483;&#x1f3fc; 本人简介&#xff1a;男 &#x1f476;&#x1f3fc; 年龄&#xff1a;18 ✍今日内容&#xff1a;《元宇宙的实践构想》04——元宇宙的安全 ❗❗❗从1.31日开始&#xff0c;阿亮每天会查阅一些元宇宙方面的小知识&#xff0c;和大家一起分享。一是由…

ChatGPT背后的技术和多模态异构数据处理的未来展望——我与一位资深工程师的走心探讨

上周&#xff0c;我和一位从业三十余年的工程师聊到ChatGPT。 作为一名人工智能领域研究者&#xff0c;我也一直对对话式大型语言模型非常感兴趣&#xff0c;在讨论中&#xff0c;我向他解释这个技术时&#xff0c;他瞬间被其中惊人之处所吸引&#x1f64c;&#xff0c;我们深…

读书笔记——《再见,平庸时代》

为什么会看这本书 《马斯克》这本书中&#xff0c;最后几段介绍了一下经济学家和作者泰勒考恩的两本书《大停滞》《再见&#xff0c;平庸时代》。《大停滞》讲的是美国这40年发展为何停滞&#xff0c;我当然不太关心这种内容。但是《再见&#xff0c;平庸时代》不是对历史的研究…

springboot 东方通(tongweb)替换tomcat

一.修改pom.xml文件依赖 1.排除springboot中内置的tomcat依赖 2.添加tongweb-spring-boot-starter和tongweb-embed依赖 特别说明下&#xff1a;我这里所有依赖的包都传到了私有仓库&#xff0c;直接复制到pom.xml文件会import失败。 <!-- SpringBoot Web容器 --> <d…

分享Python7个爬虫小案例(附源码)

本次的7个python爬虫小案例涉及到了re正则、xpath、beautiful soup、selenium等知识点&#xff0c;非常适合刚入门python爬虫的小伙伴参考学习。注&#xff1a;若涉及到版权或隐私问题&#xff0c;请及时联系我删除即可。 1.使用正则表达式和文件操作爬取并保存“某吧”某帖子…

【uniapp小程序实战】—— 使用腾讯地图获取定位

文章目录&#x1f34d;前言&#x1f34b;正文1、首先看官网uni.getLocation(OBJECT)#注意2、腾讯位置服务平台申请密钥和下载SDK2.1 申请开发者秘钥2.2 开通webserviceAPI服务2.3 下载微信小程序JavaScriptSDK2.4 安全域名设置3、配置manifest.json文件4、示例代码展示4.1 引用…

如何用Python求解微分方程组

文章目录odeint简介示例odeint简介 scipy文档中将odeint函数和ode, comples_ode这两个类称为旧API&#xff0c;是scipy早期使用的微分方程求解器&#xff0c;但由于是Fortran实现的&#xff0c;尽管使用起来并不方便&#xff0c;但速度没得说&#xff0c;所以有的时候还挺推荐…

JavaScript基础(详细总结)

目录 1、JavaScript简介 1.2、JavaScript的发展史 1.3、JavaScript的功能 1.4、JavaScript的特点 1.5、JavaScript组成 2、JavaScript基础语法 2.1、HTML引入JS 2.1.1、内部引入 2.1.2、外部引入 2.2、JS输出数据的三种方式 2.2.1、浏览器弹窗 2.2.2、输出HTML页面…

IDEA实现前端页面登录,注册、增、删、改、查操作-完整版

分层思想&#xff1a;entity层&#xff1a;存放实体类vo层&#xff1a;消息模型&#xff08;重复使用的一些属性&#xff09;mapper层&#xff1a;接口&#xff08;写方法的&#xff09;mapper.xml:MyBatis与数据库相关的一些内容controller(web)层&#xff1a;接收前端传回的参…