未验证 提交 695db161 编写于 作者: W wanganxp 提交者: GitHub

Update cover-view.md

上级 459fa6ba
#### cover-view
覆盖在原生组件上的文本视图。
小程序框架为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件,为了能正常覆盖原生组件,设计了cover-view。
app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|x|
* app-nvue所有组件均为原生渲染,不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容,nvue里也实现了`cover-view`,作用于普通`view`一样。
* 微信小程序部分原生组件实现了同层渲染,在指定的基础库版本上,某些原生组件可无需使用`cover-view`覆盖,[详见](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
* 头条小程序不需要`cover-view`,因其原生组件均实现了同层渲染。
* 360小程序不存在原生组件,无此概念
支持的事件:`click`
......@@ -17,13 +23,13 @@
#### cover-image
覆盖在原生组件上的图片视图。
覆盖在原生组件上的图片视图。可覆盖的原生组件同`cover-view`,支持嵌套在`cover-view`里。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|x|
**属性说明**
......@@ -34,7 +40,7 @@
|@error|eventhandle||图片加载失败时触发|微信小程序 2.1.0|
可覆盖的原生组件:`<video>``<map>`
app-vue上可覆盖的原生组件:`<video>``<map>`
支持的事件:`click`
......@@ -55,6 +61,7 @@
- App端还可以使用plus.nativeObj.view绘制原生内容,参考:[uni-app中使用5+界面控件](https://ask.dcloud.net.cn/article/35036)[plus.nativeObj.view规范](https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View)
- App端还提供了更灵活和强大的`subNvue`,参考[原生子窗体subNvue](/api/window/subNVues)
- 在 video 组件中使用时,若想在全屏模式下使用`cover-view`,只有在微信小程序、App端的nvue页面可实现。
- 在App端,如果重度使用video和map,推荐使用nvue页面。
- 百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view。
- 支付宝小程序中 `cover-view` 不支持嵌套。
......@@ -77,7 +84,9 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view)
以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
```html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view class="page">
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册