文章目录
组件概述
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
- uni-app的组件，分为基础组件和扩展组件。
- 每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
- 组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。
例如<component-name>是开始标签，</component-name>是结束标签。
在开始标签和结束标签之间，称为组件内容。如下面示例的content
开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。
如下面示例的property1和property2。注意闭合标签上不能写属性。
每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。
<component-name property1="value" property2="value">
content
</component-name>
注：所有组件与属性名都是小写，单词之间以连字符-连接。
1. 组件的属性类型
| 类型 | 描述 | 注解 |
|---|---|---|
| Boolean | 布尔值 | 组件写上该属性，不管该属性等于什么，其值都为 true，只有组件上没有写该属性时，属性值才为 false。如果属性值为变量，变量的值会被转换为 Boolean 类型。 |
| Number | 数字 | 1, 2.5 |
| String | 字符串 | “string” |
| Array | 数组 | [ 1, “string” ] |
| Object | 对象 | { key: value } |
| EventHandler | 事件处理函数名 | handlerName 是 methods 中定义的事件处理函数名 |
| Any | 任意属性 |
2. 公共属性列表
每个组件都有各自定义的属性，但所有uni-app的组件都，有如下属性：
| 属性名 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 组件的唯一标示 | 一般用于获取组件上下文对象，需要保持整个页面唯一 |
| ref | String | vue中组件的唯一标示 | 用来给子组件注册引用信息 |
| class | String | 组件的样式类 | 在对应的 css 中定义的样式类 |
| style | String | 组件的内联样式 | 可以动态设置的内联样式 |
| hidden | Boolean | 组件是否隐藏 | 所有组件默认是显示的 |
| data-* | Any | 自定义属性 | 组件上触发的事件时，会发送给事件处理函数 |
| @* | EventHandler | 组件的事件 | 事件绑定 |
还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model等等。
3. 在组件中使用script的data变量
组件中可以使用script的data中定义的变量，但组件的属性中使用和内容区使用的用法不一样。
- 在text内容区使用时，使用两个花括号来包裹，
- 在属性值中使用时，属性名的前面要加冒号前缀
<template> <view class="content"> <view class="text-area"> <text class="title">{{title}}</text> </view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, } </script>
4. 组件的事件
- 每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。
- 事件也是组件的属性，只不过这类属性以@为前缀。
- 事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。
<template> <view class="content"> <button size="mini" @click="goto('按钮')">按钮</button> </view> </template> <script> export default { methods: { goto(str) { console.log(url) } } } </script>
5. 基础组件
uni-app的组件，分为基础组件和扩展组件。
- 基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如
<view>组件。
- 基础组件，类似HTML里的基础标签元素。
- 与HTML不同，而是与小程序相同，可更好的满足手机端的使用习惯。
- HTML标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
- uni-app 基础组件规范，与小程序规范相近。
- 扩展组件需要将组件导入项目中才可以使用。
- 基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
注意：组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"
基础组件分类包含：
- 视图容器（View Container）
- 基础内容（Basic Content）
- 表单组件（Form）
- 路由与页面跳转（Navigation）
- 媒体组件（Media）
- 地图（Map）
- 画布（Canvas）
- webview（Web-view）
- 广告
- 页面属性配置
- uniCloud
- 各平台专有组件
在小程序平台和nvue平台，还有一些专有组件
6. 扩展组件
封装扩展组件的优势：
- 可以将组件进行任意次数的复用。
- 合理的划分组件，有助于提高应用性能。
- 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
- 组件化开发能大幅度提高应用开发效率、测试性、复用性等。
7. 组件的类别
组件分为：vue组件和小程序自定义组件
日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。
注意：
- 若扩展组件符合uni-app的easycom组件规范，则可以免注册，直接使用。
- 若组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。
8. easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
只要组件安装在项目的components目录下或uni_modules目录下，
并符合components/组件名称/组件名称.(vue|uvue)目录结构。就可以不用引用、注册，直接在页面中使用。
注意：
- 当同时存在vue和uvue时，uni-app 项目优先使用 vue 文件，
- uni-app x 项目优先使用 uvue 文件，
- 不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
- 组件库批量安装，随意使用，自动按需打包。
easycom是自动开启的，不需要手动开启。
在DCloud插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。
如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：
- import导入组件
- components里注册组件
- template中使用组件
视图容器组件
所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
-
view（视图组件）
类似于传统html中的div，用于包裹各种元素内容。
如果使用nvue，则需注意，包裹文字应该使用<text>组件。
属性说明属性名 类型 默认值 说明 hover-class String none 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持） hover-start-time Number 50 按住后多久出现点击态，单位毫秒 hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒 <template> <view class="uni-padding-wrap uni-common-mt"> <view class="uni-title uni-common-mt"> flex-direction: row <text>\n横向布局</text> </view> </view> </template>注意：
小程序平台如果使用<div>，编译时会被转换为<view>。
App平台 Vue2 项目在节点非常多时可以尝试使用<div>替换<view>以提升渲染性能。 -
scroll-view（可滚动视图区域）
可滚动视图区域。用于区域滚动。
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。但在app-uvue下，scroll-view如果是页面顶级节点，则等同于页面滚动
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 | |
| scroll-y | Boolean | false | 允许纵向滚动 | |
| upper-threshold | Number/String | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 | |
| lower-threshold | Number/String | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 | |
| scroll-top | Number/String | 设置竖向滚动条位置 | ||
| scroll-left | Number/String | 设置横向滚动条位置 | ||
| scroll-into-view | String | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | ||
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 | |
| enable-back-to-top | Boolean | false | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | app-nvue，微信小程序 |
| show-scrollbar | Boolean | false | 控制是否出现滚动条 | App-nvue 2.1.5+ |
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-threshold | Number | 45 | 设置自定义下拉刷新阈值 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| @scrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | ||
| @scrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | ||
| @scroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式
公共样式未展示
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n纵向滚动</text>
</view>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
点击这里返回顶部
</view>
<view class="uni-title uni-common-mt">
Horizontal Scroll
<text>\n横向滚动</text>
</view>
<view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
<view id="demo4" class="scroll-view-item_H uni-bg-yellow">D</view>
</scroll-view>
</view>
<view class="uni-common-pb"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
<style>
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
</style>
自定义下拉刷新
注：webview渲染时，建议使用页面级的原生下拉刷新，性能更好。如一定要在webview中自定义下拉刷新，建议使用插件
<template>
<view>
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
triggered: false
}
},
onLoad() {
this._freshing = false;
setTimeout(() => {
this.triggered = true;
}, 1000)
},
methods: {
onPulling(e) {
console.log("onpulling", e);
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
setTimeout(() => {
this.triggered = false;
this._freshing = false;
}, 3000)
},
onRestore() {
this.triggered = 'restore'; // 需要重置
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
- swiper (滑块视图容器)
一般用于左右滑动或上下滑动，比如banner轮播图。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。
swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在滑块的 index | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| @change | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：
- autoplay 自动播放导致swiper变化。
- touch 用户划动引起swiper变化。
- 其他原因将用空字符串表示
- swiper-item
仅可放置在<swiper>组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。
<template>
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration">
<swiper-item>
<image src="../../static/apple-1.jpeg" ></image>
</swiper-item>
<swiper-item>
<image src="../../static/apple-2.jpeg" ></image>
</swiper-item>
<swiper-item>
<image src="../../static/apple-3.jpeg" ></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500
}
},
}
</script>
<style>
.swiper {
height: 480rpx;
}
.swiper-item {
display: block;
height: 480rpx;
line-height: 480rpx;
text-align: center;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
}
</style>
- match-media (匹配检测节点)
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| min-width | number | 否 | 页面最小宽度（ px 为单位） | |
| max-width | number | 否 | 页面最大宽度（ px 为单位） | |
| width | number | 否 | 页面宽度（ px 为单位） | |
| min-height | number | 否 | 页面最小高度（ px 为单位） | |
| max-height | number | 否 | 页面最大高度（ px 为单位） | |
| height | number | 否 | 页面高度（ px 为单位） | |
| orientation | string | 否 | 屏幕方向（ landscape 或 portrait ） |
<view>
<match-media :min-width="375" :max-width="800" >
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
</match-media>
<match-media :min-height="400" orientation="landscape">
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
</match-media>
</view>
- movable-view（可移动的视图容器）+ movable-area (可拖动区域)
-
movable-area
由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了movable-area组件。- movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。
- 手指/鼠标按住movable-view拖动或双指缩放，拖不出movable-area规定的范围。
- 也可以不拖动，使用代码来触发movable-view在movable-area里的移动缩放。
属性名 类型 默认值 说明 scale-area Boolean false 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area 注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px
-
movable-view
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| direction | String | none | movable-view的移动方向，属性值有all、vertical、horizontal、none | |
| inertia | Boolean | false | movable-view是否带有惯性 | |
| out-of-bounds | Boolean | false | 超过可移动区域后，movable-view是否还可以移动 | |
| x | Number / String | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 | ||
| y | Number / String | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 | ||
| damping | Number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 | 360小程序不支持 |
| friction | Number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 | 360小程序不支持 |
| disabled | Boolean | false | 是否禁用 | |
| scale | Boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 | 360小程序不支持 |
| scale-min | Number | 0.5 | 定义缩放倍数最小值 | |
| scale-max | Number | 10 | 定义缩放倍数最大值 | |
| scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.5 - 10 | |
| animation | Boolean | true | 是否使用动画 | |
| @change | EventHandle | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） | ||
| @scale | EventHandle | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}， |
注：1. movable-view 必须设置width和height属性，不设置默认为10px
2. movable-view 默认为绝对定位，top和left属性为0px
3. 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于 movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
4. movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。
5. 如果遇到x、y、scale属性设置不生效的问题参考：组件属性设置不生效解决办法
6. 除了H5端和app-nvue端，其他平台不支持内嵌video、map等原生组件。更新：微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用
<template>
<view class="page-body">
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
示例 1
<text>\nmovable-view 区域小于 movable-area</text>
</view>
<movable-area>
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
</movable-area>
<view @tap="tap" class="uni-link uni-center uni-common-mt">
点击这里移动至 (30px, 30px)
</view>
<view class="uni-title uni-common-mt">
示例 2
<text>\nmovable-view区域大于movable-area</text>
</view>
<movable-area>
<movable-view class="max" direction="all">text</movable-view>
</movable-area>
<view class="uni-title uni-common-mt">
示例 3
<text>\n只可以横向移动</text>
</view>
<movable-area>
<movable-view direction="horizontal">text</movable-view>
</movable-area>
<view class="uni-title uni-common-mt">
示例 4
<text>\n只可以纵向移动</text>
</view>
<movable-area>
<movable-view direction="vertical">text</movable-view>
</movable-area>
<view class="uni-title uni-common-mt">
示例 5
<text>\n可超出边界</text>
</view>
<movable-area>
<movable-view direction="all" out-of-bounds>text</movable-view>
</movable-area>
<view class="uni-title uni-common-mt">
示例 6
<text>\n带有惯性</text>
</view>
<movable-area>
<movable-view direction="all" inertia>text</movable-view>
</movable-area>
<view class="uni-title uni-common-mt">
示例 7
<text>\n可放缩</text>
</view>
<movable-area scale-area>
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
</movable-area>
<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
点击这里放大3倍
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0,
scale: 2,
old: {
x: 0,
y: 0,
scale: 2
}
}
},
methods: {
tap: function(e) {
// 解决view层不同步的问题
this.x = this.old.x
this.y = this.old.y
this.$nextTick(function() {
this.x = 30
this.y = 30
})
},
tap2() {
// 解决view层不同步的问题
this.scale = this.old.scale
this.scale = this.old.scale
this.$nextTick(function() {
this.scale = 3
})
},
onChange: function(e) {
this.old.x = e.detail.x
this.old.y = e.detail.y
},
onScale: function(e) {
this.old.scale = e.detail.scale
}
}
}
</script>
<style>
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 150rpx;
width: 150rpx;
background-color: #f0a1a8;
color: #fff;
}
movable-area {
height: 300rpx;
width: 100%;
background-color: #D8D8D8;
overflow: hidden;
}
.max {
width:500rpx;
height: 500rpx;
}
</style>
- cover-view
覆盖在原生组件上的文本视图。
-
为什么有cover-view
app-vue和小程序框架，渲染引擎是webview的。
但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。 -
属性说明
支持的事件：click
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| scroll-top | number/string | 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 | 支付宝小程序不支持 |
- cover-image
覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
- 属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 | ||
| @load | eventhandle | 图片加载成功时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 | |
| @error | eventhandle | 图片加载失败时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 |
app-vue上可覆盖的原生组件：<video>、<map>
支持的事件：click
不支持的 CSS
position: fixed
opacity
overflow
padding
linebreak
white-space
注意：nvue的cover-view不在上述限制中，它仅支持且全部支持nvue的所有css。
App端vue页面 cover-view、cover-image 中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。App端nvue页面自2.1.5起没有这些限制。
App端 cover-image 使用本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。
<template>
<view class="page">
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" 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">
<cover-view class="controls-title">简单的自定义 controls</cover-view>
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
</video>
</view>
</template>
2720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
