codecamp

微信小程序视图容器 cover-view

cover-view

基础库 1.4.0 开始支持,低版本需做兼容处理。

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 mapvideocanvascameralive-playerlive-pusher

只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性 类型 默认值 必填 说明 最低版本
scroll-top number/string 设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效 2.1.0

提示

  1. cover-viewcover-image的aria-role仅可设置为button,读屏模式下才可以点击,并朗读出“按钮”;为空时可以聚焦,但不可点击
  2. 基础库 2.2.4 起支持 touch 相关事件,也可使用 hover-class 设置点击态
  3. 基础库 2.1.0 起支持设置 scale rotate 的 css 样式,包括 transition 动画
  4. 基础库 1.9.90 起 cover-view 支持 overflow: scroll,但不支持动态更新 overflow
  5. 基础库 1.9.90 起最外层 cover-view 支持 position: fixed
  6. 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内,避免嵌套在其他组件内。
  7. 基础库 1.6.0 起支持css transition动画,transition-property只支持transform (translateX, translateY)与opacity。
  8. 基础库 1.6.0 起支持css opacity。
  9. 事件模型遵循冒泡模型,但不会冒泡到原生组件。
  10. 文本建议都套上cover-view标签,避免排版错误。
  11. 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
  12. 建议子节点不要溢出父节点
  13. 支持使用 z-index 控制层级
  14. 默认设置的样式有:white-space: nowrap; line-height: 1.2; display: block;
  15. 自定义组件嵌套 cover-view 时,自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐,否则会导致 cover-view 不显示


微信小程序视图容器 movable-area
微信小程序视图容器 cover-image
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }