uniapp小程序视图容器cover-view使用详解

目录
  • 一，cover-view
    • 1.1 基础知识
    • 1.2 各平台差异
    • 1.3 不支持的CSS
  • 附：uni-app中cover-view覆盖原生组件
  • 总结

一，cover-view

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

部分组件，比如map、video、textarea、canvas是通过原生组件实现的，原生组件无法被前端组件覆盖，程序员需要找到能覆盖它们的存在，这也是设计出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

可以覆盖的组件有map、video、textarea、canvas

属性：

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

附：uni-app中cover-view覆盖原生组件

在uni-app中 经常要做到覆盖原生组件

cover-view 可以做到覆盖原生组件

举个例子 我们在 video 标签中  在页面上添加一个控制播放的按钮

<video id="myVideo" class="video" objectFit="cover" :src="imgSrc'" :controls="false">
            <cover-view class="iconfont iconbofang icon" @click="click"></cover-view>
</video>

// 给 父组件video标签 添加一个 相对定位
video{
  position:relative;
}

// 子组件  绝对定位
.icon{
   position:absolute;
  bottom:10px;
   right:10px;
}

这样就实现了 覆盖在原生 video组件上面了  注意 cover-view 要在 video组件里面进行书写 写到外面是不管用的

总结

到此这篇关于uniapp小程序视图容器cover-view使用的文章就介绍到这了,更多相关uniapp小程序视图容器cover-view内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序之导航滑块视图容器功能的实现代码(简单两步)

    先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码 编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw

  • 微信小程序 视图容器组件的详解及实例代码

    微信小程序 视图容器组件的详解及实例代码

    微信小程序 视图容器组件详解: 小程序给出的视图容器组件有三个:</view>.</scroll-view>和</swiper>: 1.</view> 视图容器 </view>相当于html中的</div>标签,有四个属性: hover和hover-class与点击效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果. hover-start-time和hover-stay-time与点击效果的时间有关:h

  • 微信小程序常用视图容器组件使用详解

    微信小程序常用视图容器组件使用详解

    目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述 组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称 属性="值">内容<

  • 微信小程序之滚动视图容器的实现方法

    微信小程序之滚动视图容器的实现方法

    微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con

  • uniapp小程序视图容器cover-view使用详解

    uniapp小程序视图容器cover-view使用详解

    目录 一,cover-view 1.1 基础知识 1.2 各平台差异 1.3 不支持的CSS 附:uni-app中cover-view覆盖原生组件 总结 一,cover-view 首先我们需要知道,cover-view是可以覆盖在原生组件上的文本视图,也就是cover-view组件的层级高于原生组件,就像是原生组件的层级高于前端组件一样,如flash层级就高于div的层级. 部分组件,比如map.video.textarea.canvas是通过原生组件实现的,原生组件无法被前端组件覆盖,程序员需

  • 微信小程序视图容器和基本内容组件图文详解

    微信小程序视图容器和基本内容组件图文详解

    目录 前言 一,视图容器类组件 1.1 view 1.2 srcoll-view 1.3 swiper和swiper-item 二,基本内容组件 2.1 text 2.2 rich-text 总结 前言 开发者可以通过运用组件快速搭建出页面结构,上一章也有对组件进行介绍,那么本文牛牛就来带大家学习小程序的组件. 我们可以将组件理解为微信内嵌的标签,它在小程序承担的作用与HTML的标签一致,不过组件的功能更加多样.具体. 事不宜迟,让我们开冲! 一,视图容器类组件 1.1 view 普通视图容器,

  • 微信小程序 scroll-view的使用案例代码详解

    scroll-view:滚动视图 使用view其实也能实现滚动,跟div用法差不多 而scroll-view跟view最大的区别就在于:scroll-view视图组件封装了滚动事件,监听滚动事件什么的直接写方法就行. scroll-view纵向滚动添加属性scroll-y,然后写一个固定高度就行了,我主要说一下scroll-view的横向滚动scroll-x: 我使用了display: flex;布局,特么的直接写在scroll-view上面,显示出来的结果总是不对头,试了好多次,得到了下面两种

  • 微信小程序bindtap与catchtap的区别详解

    目录 1.什么是事件 2.如何使用事件 3.bindtap和catchtap的区别 4.小程序中事件分为冒泡事件和非冒泡事件. 事件之target&&currentTarget区别 5.例子 1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) 事件对象可以携带额外信息,如 id,dataset,touches 2.如何使用事件 (1) 简单来

  • 微信小程序开发图片拖拽实例详解

    微信小程序开发图片拖拽实例详解

    微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

  • 微信小程序 wx:for的使用实例详解

    微信小程序 wx:for的使用实例详解

    微信小程序 wx:for的使用实例详解 在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现. 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据,这些在上一篇博客中有详细介绍.我们最后说到写好的本地数据可以另一个页面读取: var fileData = require('../../utils/data.js') Page({ data: { showData:

随机推荐