Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
74cd0550
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3236
Star
107
Fork
821
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
97
列表
看板
标记
里程碑
合并请求
73
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
97
Issue
97
列表
看板
标记
里程碑
合并请求
73
合并请求
73
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
74cd0550
编写于
3月 14, 2024
作者:
H
HRK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix:标题级别小修,更正文档结构
上级
7e0c4a1c
变更
93
显示空白变更内容
内联
并排
Showing
93 changed file
with
1523 addition
and
1465 deletion
+1523
-1465
docs/component/README.md
docs/component/README.md
+1
-1
docs/component/button.md
docs/component/button.md
+4
-4
docs/component/camera.md
docs/component/camera.md
+5
-5
docs/component/canvas.md
docs/component/canvas.md
+7
-6
docs/component/cell.md
docs/component/cell.md
+1
-1
docs/component/checkbox.md
docs/component/checkbox.md
+7
-7
docs/component/component-selection.md
docs/component/component-selection.md
+1
-1
docs/component/cover-image.md
docs/component/cover-image.md
+6
-6
docs/component/cover-view.md
docs/component/cover-view.md
+4
-4
docs/component/custom-tab-bar.md
docs/component/custom-tab-bar.md
+4
-4
docs/component/datacom.md
docs/component/datacom.md
+1
-1
docs/component/form.md
docs/component/form.md
+6
-6
docs/component/icon.md
docs/component/icon.md
+5
-5
docs/component/image.md
docs/component/image.md
+1
-1
docs/component/input.md
docs/component/input.md
+1
-1
docs/component/label.md
docs/component/label.md
+4
-4
docs/component/list.md
docs/component/list.md
+3
-2
docs/component/live-player.md
docs/component/live-player.md
+7
-7
docs/component/live-pusher.md
docs/component/live-pusher.md
+2
-2
docs/component/map.md
docs/component/map.md
+3
-3
docs/component/match-media.md
docs/component/match-media.md
+4
-4
docs/component/movable-area.md
docs/component/movable-area.md
+3
-3
docs/component/movable-view.md
docs/component/movable-view.md
+5
-5
docs/component/native-component.md
docs/component/native-component.md
+1
-1
docs/component/navigation-bar.md
docs/component/navigation-bar.md
+3
-3
docs/component/navigator.md
docs/component/navigator.md
+4
-4
docs/component/official-account.md
docs/component/official-account.md
+1
-1
docs/component/open-data.md
docs/component/open-data.md
+5
-5
docs/component/page-meta.md
docs/component/page-meta.md
+3
-3
docs/component/picker-view.md
docs/component/picker-view.md
+4
-4
docs/component/picker.md
docs/component/picker.md
+16
-16
docs/component/progress.md
docs/component/progress.md
+5
-5
docs/component/radio.md
docs/component/radio.md
+4
-4
docs/component/recycle-list.md
docs/component/recycle-list.md
+3
-3
docs/component/refresh.md
docs/component/refresh.md
+1
-1
docs/component/rich-text.md
docs/component/rich-text.md
+6
-6
docs/component/scroll-view.md
docs/component/scroll-view.md
+3
-3
docs/component/slider.md
docs/component/slider.md
+5
-5
docs/component/swiper.md
docs/component/swiper.md
+7
-7
docs/component/switch.md
docs/component/switch.md
+3
-3
docs/component/text.md
docs/component/text.md
+6
-6
docs/component/textarea.md
docs/component/textarea.md
+4
-4
docs/component/uniui/color.md
docs/component/uniui/color.md
+3
-2
docs/component/uniui/quickstart.md
docs/component/uniui/quickstart.md
+11
-9
docs/component/uniui/resource.md
docs/component/uniui/resource.md
+1
-1
docs/component/uniui/uni-badge.md
docs/component/uniui/uni-badge.md
+67
-66
docs/component/uniui/uni-breadcrumb.md
docs/component/uniui/uni-breadcrumb.md
+9
-7
docs/component/uniui/uni-calendar.md
docs/component/uniui/uni-calendar.md
+1
-1
docs/component/uniui/uni-card.md
docs/component/uniui/uni-card.md
+1
-0
docs/component/uniui/uni-collapse.md
docs/component/uniui/uni-collapse.md
+1
-1
docs/component/uniui/uni-combox.md
docs/component/uniui/uni-combox.md
+1
-0
docs/component/uniui/uni-countdown.md
docs/component/uniui/uni-countdown.md
+1
-1
docs/component/uniui/uni-data-checkbox.md
docs/component/uniui/uni-data-checkbox.md
+147
-146
docs/component/uniui/uni-data-picker.md
docs/component/uniui/uni-data-picker.md
+2
-0
docs/component/uniui/uni-data-select.md
docs/component/uniui/uni-data-select.md
+2
-0
docs/component/uniui/uni-dateformat.md
docs/component/uniui/uni-dateformat.md
+1
-0
docs/component/uniui/uni-datetime-picker.md
docs/component/uniui/uni-datetime-picker.md
+1
-0
docs/component/uniui/uni-drawer.md
docs/component/uniui/uni-drawer.md
+55
-54
docs/component/uniui/uni-fab.md
docs/component/uniui/uni-fab.md
+102
-101
docs/component/uniui/uni-fav.md
docs/component/uniui/uni-fav.md
+60
-59
docs/component/uniui/uni-file-picker.md
docs/component/uniui/uni-file-picker.md
+1
-0
docs/component/uniui/uni-forms.md
docs/component/uniui/uni-forms.md
+2
-0
docs/component/uniui/uni-goods-nav.md
docs/component/uniui/uni-goods-nav.md
+110
-108
docs/component/uniui/uni-grid.md
docs/component/uniui/uni-grid.md
+108
-107
docs/component/uniui/uni-group.md
docs/component/uniui/uni-group.md
+39
-37
docs/component/uniui/uni-indexed-list.md
docs/component/uniui/uni-indexed-list.md
+81
-79
docs/component/uniui/uni-link.md
docs/component/uniui/uni-link.md
+27
-25
docs/component/uniui/uni-list.md
docs/component/uniui/uni-list.md
+3
-1
docs/component/uniui/uni-load-more.md
docs/component/uniui/uni-load-more.md
+1
-0
docs/component/uniui/uni-nav-bar.md
docs/component/uniui/uni-nav-bar.md
+2
-1
docs/component/uniui/uni-notice-bar.md
docs/component/uniui/uni-notice-bar.md
+59
-58
docs/component/uniui/uni-number-box.md
docs/component/uniui/uni-number-box.md
+1
-0
docs/component/uniui/uni-pagination.md
docs/component/uniui/uni-pagination.md
+61
-60
docs/component/uniui/uni-popup.md
docs/component/uniui/uni-popup.md
+5
-5
docs/component/uniui/uni-rate.md
docs/component/uniui/uni-rate.md
+61
-60
docs/component/uniui/uni-row.md
docs/component/uniui/uni-row.md
+1
-0
docs/component/uniui/uni-sass.md
docs/component/uniui/uni-sass.md
+1
-1
docs/component/uniui/uni-search-bar.md
docs/component/uniui/uni-search-bar.md
+2
-0
docs/component/uniui/uni-section.md
docs/component/uniui/uni-section.md
+1
-0
docs/component/uniui/uni-segmented-control.md
docs/component/uniui/uni-segmented-control.md
+89
-88
docs/component/uniui/uni-steps.md
docs/component/uniui/uni-steps.md
+61
-60
docs/component/uniui/uni-swipe-action.md
docs/component/uniui/uni-swipe-action.md
+1
-0
docs/component/uniui/uni-swiper-dot.md
docs/component/uniui/uni-swiper-dot.md
+1
-0
docs/component/uniui/uni-table.md
docs/component/uniui/uni-table.md
+2
-0
docs/component/uniui/uni-tag.md
docs/component/uniui/uni-tag.md
+59
-58
docs/component/uniui/uni-title.md
docs/component/uniui/uni-title.md
+79
-78
docs/component/uniui/uni-tooltip.md
docs/component/uniui/uni-tooltip.md
+2
-0
docs/component/uniui/uni-transition.md
docs/component/uniui/uni-transition.md
+2
-0
docs/component/video.md
docs/component/video.md
+3
-3
docs/component/view.md
docs/component/view.md
+9
-7
docs/component/vue-component.md
docs/component/vue-component.md
+8
-8
docs/component/waterfall.md
docs/component/waterfall.md
+1
-1
docs/component/web-view.md
docs/component/web-view.md
+5
-5
未找到文件。
docs/component/README.md
浏览文件 @
74cd0550
##
#
组件使用的入门教程
## 组件使用的入门教程
-
组件是视图层的基本组成单元。
-
组件是一个单独且可复用的功能模块的封装。
...
...
docs/component/button.md
浏览文件 @
74cd0550
...
...
@@ -2,7 +2,7 @@
按钮。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|生效时机|平台差异说明|
|:-|:-|:-|:-|:-|:-|
...
...
@@ -118,7 +118,7 @@ open-type 为 feedback时:
-
在 App 中,开发者登录
[
DCloud开发者中心
](
https://dev.dcloud.net.cn/
)
后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。
-
但推荐使用全端的、开源的、云端一体的意见反馈功能,
[
前端部分
](
https://ext.dcloud.net.cn/plugin?id=50
)
、
[
管理端部分
](
https://ext.dcloud.net.cn/plugin?id=4992
)
**注意**
#### 注意
-
button组件支持style中通过css定义文字大小、颜色
...
...
@@ -173,7 +173,7 @@ button 组件没有 url 属性,如果要跳转页面,可以在@click中编
```
**注意**
#### 注意
-
点击 share 分享按钮时会触发
[
onShareAppMessage
](
/api/plugins/share
)
-
支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,
[
参考
](
https://docs.alipay.com/mini/api/getphonenumber
)
...
...
@@ -214,7 +214,7 @@ button 组件没有 url 属性,如果要跳转页面,可以在@click中编
:::
**注意**
#### 注意
事件务必使用vue语法,比如下面的获取手机号示例
...
...
docs/component/camera.md
浏览文件 @
74cd0550
##
##
camera
## camera
页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -12,7 +12,7 @@
*
活体检测另见文档
[
实人认证
](
/api/plugins/facialRecognitionVerify
)
,人脸识别另见文档
[
生物认证
](
/api/system/authentication
)
*
app-nvue下支持barcode组件,可实现自定义扫码。
[
参考
](
https://uniapp.dcloud.io/component/barcode
)
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -30,14 +30,14 @@
**Tips:**
#### Tips
*
camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
*
请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
*
同一页面只能插入一个 camera 组件。
*
相关API:
[
createCameraContext
](
/api/media/camera-context
)
**代码示例**
#### 示例
```
html
<template>
...
...
docs/component/canvas.md
浏览文件 @
74cd0550
##
##
canvas
## canvas
画布。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -17,7 +17,7 @@
|@longtap|EventHandle||手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动|抖音小程序与飞书小程序不支持|
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}|抖音小程序与飞书小程序不支持|
**注意事项:**
#### 注意事项
*
canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
*
h5、app-vue 中单个尺寸过大的 canvas 在 iOS/Safari 无法绘制(具体限制尺寸未公布)。
...
...
@@ -27,7 +27,8 @@
*
app-vue的canvas虽然是webview自带的canvas,但却比nvue和微信小程序的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅,关键不在于渲染引擎的速度,而在于减少从逻辑层向视图层频繁通信造成的折损。
*
小程序、app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用
[
renderjs
](
https://uniapp.dcloud.io/tutorial/renderjs?id=renderjs
)
技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端由于没有renderjs技术,做不到这么流畅的动画。
**示例:**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas
)
#### 示例:
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas
)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas
> Template
...
...
@@ -75,7 +76,7 @@ export default {
相关 api:
[
uni.createCanvasContext
](
/api/canvas/createCanvasContext
)
**扩展阅读**
#### 扩展阅读
canvas的常用用途有图表和图片处理,在uni-app插件市场有大量基于canvas的插件,可搜索
[
图表
](
https://ext.dcloud.net.cn/search?q=图表
)
、
[
头像裁剪
](
https://ext.dcloud.net.cn/search?q=头像裁剪
)
、
[
海报
](
https://ext.dcloud.net.cn/search?q=海报
)
、
[
二维码
](
https://ext.dcloud.net.cn/search?q=%E4%BA%8C%E7%BB%B4%E7%A0%81
)
。
...
...
@@ -85,7 +86,7 @@ canvas的常用用途有图表和图片处理,在uni-app插件市场有大量
-
如不考虑小程序,那么App端和H5,也可以通过renderjs技术来使用echart、f2等web图表,功能性能比uchart更好。
[
什么是renderjs
](
https://uniapp.dcloud.io/frame?id=renderjs
)
、
[
基于renderjs使用echart的示例
](
https://ext.dcloud.net.cn/plugin?id=1207
)
**nvue页面如何使用canvas**
#### nvue页面如何使用canvas
HBuilderX 2.2.5 开始 nvue 页面支持 Canvas,支持 W3C WebGL API
[
WebGL 1.0
](
https://www.khronos.org/registry/webgl/specs/latest/1.0/
)
...
...
docs/component/cell.md
浏览文件 @
74cd0550
##
##
cell
## cell
app端nvue专用组件。它的重要价值在于告诉原生引擎,哪些部分是可重用的。
...
...
docs/component/checkbox.md
浏览文件 @
74cd0550
##
##
checkbox-group
## checkbox-group
多项选择器,内部由多个 checkbox 组成。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|@change|EventHandle||
``<checkbox-group>``
中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}|
###
#
checkbox
### checkbox
多选项目。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -24,7 +24,7 @@
|activeBorderColor|Color|#d1d1d1|checkbox选中时的边框颜色|H5(3.99+)、App-Vue(3.99+)|
|iconColor|Color|#007aff|checkbox的图标颜色|H5(3.99+)、App-Vue(3.99+)|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/checkbox/checkbox
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/checkbox/checkbox)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -142,9 +142,9 @@
:::
**注意**
#### 注意
-
checkbox的默认颜色,在不同平台不一样。微信小程序、360小程序是绿色的,抖音小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
-
如需调节checkbox大小,可通过css的scale方法调节,如缩小到70%
`style="transform:scale(0.7)"`
**扩展**
#### 扩展
-
uni-ui提供了增强的uni-data-checkbox组件,基于
[
datacom规范
](
/component/datacom
)
,只需传入data数据,即可自动生成一组复选框,使用方式更简洁,并且支持
[
uni-forms
](
https://ext.dcloud.net.cn/plugin?id=2773
)
的表单验证。uni-data-checkbox组件详见
[
https://ext.dcloud.net.cn/plugin?id=3456
](
https://ext.dcloud.net.cn/plugin?id=3456
)
docs/component/component-selection.md
浏览文件 @
74cd0550
##
#
组件的概念
## 组件的概念
组件是现代开发的重要里程碑。组件重构了分工模型,让大量的轮子出现,让开发者可以拿来轮子直接用,大幅提升了整个产业的效率。
uni-app是有
[
内置组件
](
https://uniapp.dcloud.io/component/README
)
的。这和web开发不一样。
...
...
docs/component/cover-image.md
浏览文件 @
74cd0550
##
#
cover-image
## cover-image
覆盖在原生组件上的图片视图。可覆盖的原生组件同
`cover-view`
,支持嵌套在
`cover-view`
里。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|x|√|√|
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -20,7 +20,7 @@ app-vue上可覆盖的原生组件:`<video>`、`<map>`
支持的事件:
`click`
**不支持的 CSS**
#### 不支持的 CSS
-
position: fixed
-
opacity
...
...
@@ -31,7 +31,7 @@ app-vue上可覆盖的原生组件:`<video>`、`<map>`
注意:nvue的cover-view不在上述限制中,它仅支持且全部支持nvue的所有css。
**Tips**
#### tips
-
App端vue页面
`cover-view`
、
`cover-image`
中不支持嵌套其它组件,包括再次嵌套
`cover-view`
,仅可覆盖
`video`
、
`map`
。App端nvue页面自2.1.5起没有这些限制。
-
App端
`cover-image`
使用本地图像的话,打包前需要设置资源为释放模式,在manifest文件内app-plus新增runmode节点,设置值为liberate。
...
...
@@ -39,7 +39,7 @@ app-vue上可覆盖的原生组件:`<video>`、`<map>`
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view
)
#### 示例
[查看演示](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模板,可直接体验完整示例。
...
...
docs/component/cover-view.md
浏览文件 @
74cd0550
##
#
cover-view
## cover-view
覆盖在原生组件上的文本视图。
app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -20,7 +20,7 @@ app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,
**Tips**
#### tips
-
app-nvue所有组件均为原生渲染,不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容,nvue里也实现了
`cover-view`
,作用与普通
`view`
一样。
-
在App端,如果重度使用video和map,推荐使用nvue页面。
...
...
@@ -37,7 +37,7 @@ app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,
**微信小程序的cover-view使用注意:**
#### 微信小程序的cover-view使用注意:
-
cover-view和cover-image的
`aria-role`
仅可设置为
`button`
,读屏模式下才可以点击,并朗读出“按钮”;为空时可以聚焦,但不可点击。
-
基础库 2.2.4 起支持
`touch`
相关事件,也可使用
`hover-class`
设置点击态。
-
基础库 2.1.0 起支持设置
`scale`
`rotate`
的 css 样式,包括
`transition`
动画。
...
...
docs/component/custom-tab-bar.md
浏览文件 @
74cd0550
##
##
custom-tab-bar
## custom-tab-bar
自定义tabBar组件。
...
...
@@ -12,11 +12,11 @@
该组件支持所有
``tabBar``
相关 API,例如设置 tab 徽标、显示红点、以及 switchTab 等。
**平台兼容性**
#### 平台兼容性
__仅 H5 支持__
,HBuilderX 2.9.9 + 。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
...
...
@@ -35,7 +35,7 @@ __仅 H5 支持__,HBuilderX 2.9.9 + 。
本组件无需配置 tabBar 的 list,每个 tabItem 仍然从
`pages.json`
中读取。避免多端编写重复代码。
**示例**
#### 示例
在
`hello uni-app`
中,在 topWindow 中放置自定义tabBar组件,将页面一级导航放置在网页顶部。
...
...
docs/component/datacom.md
浏览文件 @
74cd0550
##
#
什么是datacom
## 什么是datacom
`datacom`
,全称是
`data components`
,数据驱动的组件。
...
...
docs/component/form.md
浏览文件 @
74cd0550
##
##
form
## form
表单,将组件内的用户输入的
``<switch>``
``<input>``
``<checkbox>``
``<slider>``
``<radio>``
``<picker>``
提交。
当点击
``<form>``
表单中 formType 为 submit 的
``<button>``
组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
**属性说明**
#### 属性说明
|属性名|类型|说明|平台差异说明|
|:-|:-|:-|:-|
...
...
@@ -12,7 +12,7 @@
|@submit|EventHandle|携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId||
|@reset|EventHandle|表单重置时会触发 reset 事件|
|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/form/form
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/form/form)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -104,7 +104,7 @@
:::
**使用内置 behaviors**
#### 使用内置 behaviors
小程序端在
`form`
内的自定义组件内有
`input`
表单控件时,或者用普通标签实现表单控件,例如
``评分``
等,无法在
`form`
的
`submit`
事件内获取组件内表单控件值,此时可以使用
`behaviors`
。
...
...
@@ -114,7 +114,7 @@ uni://form-field
> 目前仅支持 微信小程序、QQ小程序、百度小程序、h5。
**uni://form-field**
#### uni://form-field
使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件,并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。
...
...
@@ -123,7 +123,7 @@ uni://form-field
|name|String|在表单中的字段名|
|value|任意|在表单中的字段值|
示例如下:
#### 示例如下
```
html
<!-- /pages/index/index.vue -->
...
...
docs/component/icon.md
浏览文件 @
74cd0550
##
##
icon
## icon
图标。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√(2.2.3+)|√|√|√|√|√|√|√|√|√|
**Tips**
#### tips
*
由于 icon 组件各端表现存在差异,可以通过使用
[
字体图标
](
/tutorial/syntax-css.md#字体图标
)
的方式来弥补各端差异。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|---|---|---|---|
...
...
@@ -29,7 +29,7 @@
|百度小程序|success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect|
**示例**
#### 示例
```
html
<view
class=
"item"
v-for=
"(value,index) in iconType"
:key=
"index"
>
<icon
:type=
"value"
size=
"26"
/>
...
...
docs/component/image.md
浏览文件 @
74cd0550
...
...
@@ -35,7 +35,7 @@
*
iOS14以下,app-vue下,iOS不支持;app-nvue/uvue下,iOS支持;微信小程序2.9.0起,配置属性webp为true时iOS支持;
*
pc浏览器上,webp在不同浏览器的支持详见:
[
https://caniuse.com/?search=webp
](
https://caniuse.com/?search=webp
)
**Tips**
#### tips
-
`<image>`
组件未设置宽高时,默认宽度320px、高度240px。尤其注意当图片加载失败时,widthFix模式指定宽度的图片,虽然图片空白,但其高度会变成240px;
`app-nvue平台,暂时默认为屏幕宽度、高度 240px;`
-
`src`
仅支持相对路径、绝对路径,支持 base64 码;
...
...
docs/component/input.md
浏览文件 @
74cd0550
...
...
@@ -46,7 +46,7 @@ html规范中input不仅是输入框,还有radio、checkbox、时间、日期
|@confirm|EventHandle||点击完成按钮时触发,event.detail = {value: value}|
快手小程序不支持|
|@keyboardheightchange|eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|微信小程序基础库2.7.0+、App 3.1.0+|
**Tips**
#### tips
-
`input`
事件处理函数可以直接 return 一个字符串,将替换输入框的内容。仅微信小程序支持。
-
如果遇到 value 属性设置不生效的问题参考:
[
组件属性设置不生效解决办法
](
/tutorial/vue-api.md#componentsolutions
)
...
...
docs/component/label.md
浏览文件 @
74cd0550
##
##
label
## label
用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
...
...
@@ -6,16 +6,16 @@ for优先级高于内部控件,内部有多个控件的时候默认触发第
目前可以绑定的控件有:
``<button>``
,
``<checkbox>``
,
``<radio>``
,
``<switch>``
。
**属性说明**
#### 属性说明
|属性名|类型|说明|
|:-|:-|:-|
|for|String|绑定控件的 id|
**注:**
#### 注意
-
app-nvue平台 暂不支持for属性
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/label/label
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/label/label)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
docs/component/list.md
浏览文件 @
74cd0550
##
##
list
## list
app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。
...
...
@@ -8,6 +8,7 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件
`<list>`
组件是提供垂直列表功能的核心组件,拥有平滑的滚动和高效的内存管理,非常适合用于长列表的展示。最简单的使用方法是在
`<list>`
标签内使用一组由简单数组循环生成的
`<cell>`
标签填充。
#### 示例
```
html
<template>
<list>
...
...
@@ -29,7 +30,7 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件
</script>
```
> **注意**
#### 注意
> - 相同方向 `<list>` 或者 `<scroll-view>` 互相嵌套时,Android 平台子 `<list>` 不可滚动,iOS 可以,iOS 有Bounce效果, Android仅可滚动时有
> - `<list>` 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。
> - list是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变、style的transparentTitle导航栏透明。
...
...
docs/component/live-player.md
浏览文件 @
74cd0550
##
##
live-player
## live-player
实时音视频播放,也称直播拉流。
使用live-player 组件需注意:如果发布到小程序,需要先通过各家小程序的审核。指定类目的小程序才能使用(
[
微信小程序类目
](
https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
)
、
[
百度小程序类目
](
https://smartprogram.baidu.com/docs/develop/component/media/#live-player/
)
),审核通过后在各家小程序管理后台自助开通该组件权限。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|飞书小程序|QQ小程序|快应用|360小程序|京东小程序|
|:-: |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -14,7 +14,7 @@
-
H5 下可用 video 播放符合 HTML5 规范的流媒体,rtmp 等非 HTML5 标准的流媒体格式,仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上,需要安装 flash 插件才能播放 rtmp 等格式。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -70,7 +70,7 @@ sound-mode 的合法值
|ear|听筒|
**Tips**
#### tips
*
百度小程序 iOS 端不支持设置 orientation 属性;
*
微信小程序已废弃 background-mute 属性,默认为进入后台静音;
...
...
@@ -82,7 +82,7 @@ sound-mode 的合法值
*
App端使用直播,推荐nvue页面下用video组件,可避免复杂的层级问题和全屏覆盖问题。
**状态码**
#### 状态码
|代码|说明|
|---|---|
...
...
@@ -110,7 +110,7 @@ sound-mode 的合法值
|3003|RTMP服务器握手失败|
|3005|RTMP 读/写失败|
**网络状态数据**
#### 网络状态数据
|键名|说明|
|---|---|
...
...
@@ -123,7 +123,7 @@ sound-mode 的合法值
|videoWidth|视频画面的宽度|
|videoHeight|视频画面的高度|
**示例**
#### 示例
```
html
<live-player
...
...
docs/component/live-pusher.md
浏览文件 @
74cd0550
##
##
live-pusher
## live-pusher
实时音视频录制,也称直播推流。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
docs/component/map.md
浏览文件 @
74cd0550
...
...
@@ -4,7 +4,7 @@
地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -19,7 +19,7 @@
|腾讯||√|√|
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -212,7 +212,7 @@ MapContext.on('markerClusterCreate', callback) 触发时,通过 [MapContext.ad
地图组件的经纬度必填,如果不填经纬度则默认值是北京的经纬度。
**示例**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/map/map
)
#### 示例
[查看示例](https://hellouniapp.dcloud.net.cn/pages/component/map/map)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/map/map
> Template
...
...
docs/component/match-media.md
浏览文件 @
74cd0550
##
#
match-media
## match-media
media query 匹配检测节点。
...
...
@@ -6,7 +6,7 @@ media query 匹配检测节点。
例如在match-media组件中放置一个侧边栏,媒体查询规则设置为宽屏才显示,就可以实现在PC宽屏显示该侧边栏,而在手机窄屏中不显示侧边栏的效果。
**平台兼容性**
#### 平台兼容性
|app|h5|微信小程序|支付宝小程序|qq小程序|百度小程序|抖音小程序|飞书小程序|360小程序|快应用|京东小程序|
|:-|:-|:-|:-|:-|:-|:-|:-|:-|:-|:-|
...
...
@@ -14,7 +14,7 @@ media query 匹配检测节点。
注意:支付宝小程序、qq小程序、百度小程序、抖音小程序,暂不支持监听屏幕动态改变,即只执行一次媒体查询。
**属性说明**
#### 属性说明
|属性名|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
...
...
@@ -26,7 +26,7 @@ media query 匹配检测节点。
|height|number||否|页面高度( px 为单位)|
|orientation|string||否|屏幕方向( landscape 或 portrait )|
**match-media 示例**
#### match-media 示例
以下示例代码,推荐使用HBuilderX,新建uni-app项目,可直接体验完整示例。
```
html
...
...
docs/component/movable-area.md
浏览文件 @
74cd0550
##
#
movable-area
## movable-area
可拖动区域
...
...
@@ -12,13 +12,13 @@
`movable-view`
的规范另见
[
movable-view
](
/component/movable-view.md
)
。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|x|√|√|√|√|√|
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
...
...
docs/component/movable-view.md
浏览文件 @
74cd0550
##
#
movable-view
## movable-view
可移动的视图容器,在页面中可以拖拽滑动或双指缩放。
`movable-view`
必须在
`movable-area`
组件中,并且必须是直接子节点,否则不能移动。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|x|√|√|√|√|√|
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -43,12 +43,12 @@
>
> 当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
**Tips**
#### Tips
-
movable-view必须在
`<movable-area/>`
组件中,并且必须是直接子节点,否则不能移动。
-
如果遇到x、y、scale属性设置不生效的问题参考:
[
组件属性设置不生效解决办法
](
/tutorial/vue-api.md#componentsolutions
)
-
除了H5端和app-nvue端,其他平台不支持内嵌video、map等原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
...
...
docs/component/native-component.md
浏览文件 @
74cd0550
##
##
原生组件说明
## 原生组件说明
小程序和App的vue页面,主体是webview渲染的。为了提升性能,小程序和App的vue页面下部分ui元素,比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
...
...
docs/component/navigation-bar.md
浏览文件 @
74cd0550
##
##
navigation-bar
## navigation-bar
页面导航条配置节点,用于指定导航栏的一些属性。只能是
[
page-meta
](
https://uniapp.dcloud.io/component/page-meta
)
组件内的第一个节点,需要配合它一同使用。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -10,7 +10,7 @@
从HBuilderX 2.9.3起,编译到所有平台均支持
`navigation-bar`
,但编译到微信时,受微信基础库版本限制;编译到其他平台不受平台版本限制。
**属性说明**
#### 属性说明
|属性|类型|默认值|必填|说明|最低版本
|:-|:-|:-|:-|:-|:-|
...
...
docs/component/navigator.md
浏览文件 @
74cd0550
##
##
navigator
## navigator
页面跳转。
...
...
@@ -6,7 +6,7 @@
除了组件方式,API方式也可以实现页面跳转,另见:
[
https://uniapp.dcloud.io/api/router?id=navigateto
](
https://uniapp.dcloud.io/api/router?id=navigateto
)
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -44,7 +44,7 @@
-
[
uLink组件
](
https://ext.dcloud.net.cn/plugin?id=1182
)
是navigator组件的增强版,样式上自带下划线,功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
-
Vue3 项目因 SSR 需要,H5 端会在外层嵌套 a 标签
**示例**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/navigator/navigator
)
#### 示例
[查看示例](https://hellouniapp.dcloud.net.cn/pages/component/navigator/navigator)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/navigator/navigator
...
...
docs/component/official-account.md
浏览文件 @
74cd0550
##
##
official-account
## official-account
微信公众号关注组件。当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内。
...
...
docs/component/open-data.md
浏览文件 @
74cd0550
##
##
open-data
## open-data
用于展示平台开放的数据。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|x|√|x|x|x|x|
**Tips**
#### tips
该功能为各小程序平台提供的开放能力。App端和H5端不涉及此概念。
支付宝没有open-data组件,但提供了API方式获取相关信息。
[
参考
](
https://docs.alipay.com/mini/api/ch8chh
)
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -42,7 +42,7 @@
-
用户性别、地区、语言展示为为空
`“”`
-
小程序通过
`<open-data>`
展示群名称能力保留,平台会针对小程序生命周期内首次调用该组件展示群名称向用户提示:“群名称仅你可见,小程序无法获取。”
**示例**
#### 示例
```
html
<open-data
type=
"userNickName"
></open-data>
...
...
docs/component/page-meta.md
浏览文件 @
74cd0550
##
##
page-meta
## page-meta
页面属性配置节点,用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
...
...
@@ -8,7 +8,7 @@
`page-meta`
只能是页面内的第一个节点。可以配合
[
navigation-bar
](
https://uniapp.dcloud.io/component/navigation-bar
)
组件一同使用。
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -16,7 +16,7 @@
从HBuilderX 2.6.3起,编译到所有平台均支持
`page-meta`
,但编译到微信时,受微信基础库版本限制;编译到其他平台不受平台版本限制。
**属性说明**
#### 属性说明
|属性|类型|默认值|必填|说明|版本要求/平台差异说明|
|:-|:-|:-|:-|:-|:-|
...
...
docs/component/picker-view.md
浏览文件 @
74cd0550
##
##
picker-view
## picker-view
嵌入页面的滚动选择器。
相对于
`picker`
组件,
`picker-view`
拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时,往往需要使用
`picker-view`
。
**属性说明**
#### 属性说明
|属性名|类型|默认值|平台差异说明|
|:-|:-|:-|:-|
...
...
@@ -28,7 +28,7 @@
**注意:**
nvue页面子节点未继承 picker-view 的选中框的高度,需要自己设置高度并居中。
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/picker-view/picker-view
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker-view/picker-view)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -117,7 +117,7 @@
:::
**Tips**
#### tips
-
微信小程序端,滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
-
在2.6.3版本以前,如果需要在PC端使用
`picker-view`
,需配置
[
H5模版
](
https://uniapp.dcloud.io/collocation/manifest?id=h5-template
)
,并引入
[
touch-emulator.js
](
https://github.com/dcloudio/touchemulator
)
...
...
docs/component/picker.md
浏览文件 @
74cd0550
##
##
picker
## picker
从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
###
#
普通选择器
### 普通选择器
``mode = selector``
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -20,11 +20,11 @@
-
picker在各平台的实现是有UI差异的,有的平台如百度、支付宝小程序的Android端是从中间弹出的;有的平台支持循环滚动如百度小程序;有的平台没有取消按钮如App-iOS端。但均不影响功能使用。
###
#
多列选择器
### 多列选择器
``mode = multiSelector``
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -32,7 +32,7 @@
支付宝小程序 picker 组件不支持多列选择,可以使用 picker-view 组件替代。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
...
...
@@ -48,11 +48,11 @@
-
由于 JavaScript 的限制 vue 不能观测如下方式设置 value:
``this.value[0] = 0``
(
[
vue 注意事项
](
/tutorial/vue-basics.md#listrendering
)
),解决方式参考:
[
hello-uniapp 示例
](
https://github.com/dcloudio/hello-uniapp/commit/59264474172a591c865431d02a2a1e3583978827
)
-
微信开发工具的pc模拟器有可能出现拖动数据错乱,使用真机正常
###
#
时间选择器
### 时间选择器
``mode = time``
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -60,7 +60,7 @@
-
时间选择在App端调用的是os的原生时间选择控件,在不同平台有不同的ui表现
**属性说明**
### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -71,11 +71,11 @@
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|
|
###
#
日期选择器
### 日期选择器
``mode = date``
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -83,7 +83,7 @@
日期选择默认在App端和H5端(PC版Chrome以及PC版FireFox)调用的是os的原生日期选择控件,在不同平台有不同的ui表现,当配置fields参数后使用统一的展示方式。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -103,11 +103,11 @@
|month|选择器粒度为月份|
|day|选择器粒度为天|
###
#
省市区选择器
### 省市区选择器
``mode = region``
**平台差异说明**
#### 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
...
...
@@ -123,7 +123,7 @@
|@cancel|EventHandle||取消选择时触发(快手小程序不支持)|
|disabled|Boolean|false|是否禁用(快手小程序不支持)|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/picker/picker
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -237,7 +237,7 @@ export default {
预览H5效果:使用浏览器的手机模式访问
[
https://hellouniapp.dcloud.net.cn/pages/component/picker/picker
](
https://hellouniapp.dcloud.net.cn/pages/component/picker/picker
)
**注意**
#### 注意
-
在picker内容还在滚动时或滚动回弹动画还未结束时,点确定关闭弹出的picker,数据无法及时更新。需等待一下,或手动触停滚动再点确定。所有平台均如此
**扩展**
...
...
docs/component/progress.md
浏览文件 @
74cd0550
##
##
progress
## progress
进度条。
**属性说明**
#### 属性说明
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:- |:- |:- |:- |:- |
...
...
@@ -17,7 +17,7 @@
|duration|Number|30|进度增加1%所需毫秒数|App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、App-Vue 3.1.11+、快手小程序、京东小程序|
|@activeend |EventHandle| |动画完成事件 |微信小程序、京东小程序 |
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/progress/progress
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/progress/progress)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
docs/component/radio.md
浏览文件 @
74cd0550
##
##
radio-group
## radio-group
单项选择器,内部由多个
``<radio>``
组成。通过把多个
`radio`
包裹在一个
`radio-group`
下,实现这些
`radio`
的单选。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
...
...
@@ -12,7 +12,7 @@
单选项目。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -26,7 +26,7 @@
|activeBorderColor|Color||radio选中时的边框颜色|H5(3.99+)、App-Vue(3.99+)|
|iconColor|Color|#ffffff|radio的图标颜色|H5(3.99+)、App-Vue(3.99+)|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/radio/radio
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/radio/radio)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
docs/component/recycle-list.md
浏览文件 @
74cd0550
##
##
recycle-list
## recycle-list
app端nvue专用组件。
...
...
@@ -12,7 +12,7 @@ app端nvue专用组件。
#### cell-slot
`<cell-slot>`
代表的是列表每一项的模板,它只用来描述模板的结构,并不对应实际的节点。
`<cell-slot>`
的个数只表示模板的种类数,真实列表项的个数是由数据决定的。
**注意**
#### 注意
-
`<cell-slot>`
包含自定义组件时,在 Android 上有性能问题
-
recycle-list 是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
...
...
@@ -26,7 +26,7 @@ key|可选属性,用于指定列表数据中可以作为唯一标识的键值
-
warning 属性的省略 - 如果没写
`switch`
,无论有没有写
`case`
或
`default`
,都只使用第一个模板 - 在写了
`switch`
的情况下,
`case`
和
`default`
必须写一个,否则该模板将会被忽略
属性
####
属性
-
for
在
`<recycle-list>`
添加 for 属性即可描述如何循环展开列表的数据,语法和 Vue 的 v-for 指令类似,但是它循环的是自己内部的子节点,并不是当前节点。写法:
...
...
docs/component/refresh.md
浏览文件 @
74cd0550
##
##
refresh
## refresh
app端nvue专用组件。
...
...
docs/component/rich-text.md
浏览文件 @
74cd0550
##
##
rich-text
## rich-text
富文本。
支持默认事件,包括:click、touchstart、touchmove、touchcancel、touchend、longpress。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台兼容|
|:-|:-|:-|:-|:-|
...
...
@@ -21,7 +21,7 @@ nodes 值为 HTML String 时,在组件内部将自动解析为节点列表,
节点列表内的节点现支持两种类型,通过 type 来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的 HTML 节点。
**元素节点:type = node**
#### 元素节点:type = node
|属性|说明|类型|必填|备注|
|:-|:-|:-|:-|:-|
...
...
@@ -29,7 +29,7 @@ nodes 值为 HTML String 时,在组件内部将自动解析为节点列表,
|attrs|属性|Object|否|支持部分受信任的属性,遵循 Pascal 命名法|
|children|子节点列表|Array|否|结构和 nodes 一致|
**文本节点:type = text**
#### 文本节点:type = text
|属性|说明|类型|必填|备注|
|:-|:-|:-|:-|:-|
...
...
@@ -85,7 +85,7 @@ nodes 值为 HTML String 时,在组件内部将自动解析为节点列表,
|tr||
|ul|
|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/rich-text/rich-text
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/rich-text/rich-text)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -141,7 +141,7 @@ export default {
:::
**Tips**
#### tips
-
nodes 不推荐使用 String 类型,性能会有所下降。
-
rich-text 组件内屏蔽所有节点的事件。所以如果内容中有链接、图片需要点击,则不能使用rich-text,此时可在
[
uni-app插件市场
](
https://ext.dcloud.net.cn/search?q=parse
)
搜索parse插件使用。app-vue的rich-text组件支持链接图片点击。
...
...
docs/component/scroll-view.md
浏览文件 @
74cd0550
# scroll-view
#
#
scroll-view
可滚动视图区域。用于区域滚动。
...
...
@@ -35,7 +35,7 @@
使用竖向滚动时,需要给
``<scroll-view>``
一个固定高度,通过 css 设置 height;使用横向滚动时,需要给
``<scroll-view>``
添加
``white-space: nowrap;``
样式。
## 示例
##
##
示例
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
)
...
...
@@ -147,7 +147,7 @@
:::
### 自定义下拉刷新
###
#
自定义下拉刷新
注意,在webview渲染时,自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。
...
...
docs/component/slider.md
浏览文件 @
74cd0550
##
##
slider
## slider
滑动选择器。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
...
...
@@ -21,12 +21,12 @@
<!-- |color|Color|#e9e9e9|背景条的颜色(请使用 backgroundColor)|
|selected-color|Color|#1aad19|已选择的颜色(请使用 activeColor)| -->
**Tips**
#### tips
-
activeColor默认值在不同平台不一样,微信是绿色(#1aad19),头条是红色,其他平台是 #007aff(蓝色)
-
如需要区间滑块,即一根横条上使用2个滑块选择一段范围,可见
[
插件市场
](
https://ext.dcloud.net.cn/search?q=%E5%8C%BA%E9%97%B4%E6%BB%91%E5%9D%97
)
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/slider/slider
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/slider/slider)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -75,5 +75,5 @@ export default {
:::
**Tips**
#### 注意
-
2.6.3以前,在PC端使用
`slider`
,需配置
[
H5模版
](
https://uniapp.dcloud.io/collocation/manifest?id=h5-template
)
,并引入
[
touch-emulator.js
](
https://github.com/dcloudio/touchemulator
)
docs/component/swiper.md
浏览文件 @
74cd0550
##
#
swiper
## swiper
滑块视图容器。
...
...
@@ -6,7 +6,7 @@
注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -41,12 +41,12 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
-
touch 用户划动引起swiper变化。
-
其他原因将用空字符串表示。
**swiper做左右拖动的长列表的专项问题**
#### swiper做左右拖动的长列表的专项问题
-
swiper是单页组件,适合做banner图轮播和简单列表左右滑动。
-
因为性能问题,用swiper做复杂长列表,需要较高的优化技巧以及接受一些限制。
-
这是一个范例,
[
插件市场新闻模板示例
](
https://ext.dcloud.net.cn/plugin?id=103
)
,它在App端使用了nvue的原生渲染,实现高性能的左右拖动长列表;并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据,dom中的数据过多时,它会自动释放。就是说App上,只要看过这一页,再进去时内容是还在的。而在非App上,只能做到缓存3页数据,其他页即便看过,再进去也会重新加载。并且非App的这种情况下,不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新,但性能不佳。一般小程序的大厂案例里,提供左右拖长列表的,都是这种做法。
**Tips**
#### Tips
-
如果 nvue 页面
``@animationfinish``
事件不能返回正确的数据,可同时监听
``@change``
事件。
-
使用竖向滚动时,需要给
``<scroll-view>``
一个固定高度,通过 css 设置 height。
...
...
@@ -58,7 +58,7 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
-
同时监听 change transition,开始滑动时触发transition, 放开手后,在ios平台触发顺序为 transition... change,Android/微信小程序/支付宝为 transition... change transition...
###
#
easing-function
### easing-function
|值 | 说明|
|-- |-- |
...
...
@@ -71,14 +71,14 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
###
#
swiper-item
### swiper-item
仅可放置在
``<swiper>``
组件中,宽高自动设置为100%。注意:宽高100%是相对于其父组件,不是相对于子组件,不能被子组件自动撑开。
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|item-id|String||该 swiper-item 的标识符|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/swiper/swiper
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/swiper/swiper)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
docs/component/switch.md
浏览文件 @
74cd0550
##
##
switch
## switch
开关选择器。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
...
...
@@ -12,7 +12,7 @@
|color|Color||switch 的颜色,同 css 的 color|
|
|@change|EventHandle||checked 改变时触发 change 事件,event.detail={ value:checked}||
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/switch/switch
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/switch/switch
> Template
...
...
docs/component/text.md
浏览文件 @
74cd0550
# text组件
#
#
text组件
文本组件。用于包裹文本内容。
...
...
@@ -6,7 +6,7 @@
虽然app-uvue中写在view的text区域的文字,也会被编译器自动包裹一层text组件,看起来也可以使用。但这样会造成无法修改该text文字的样式,详见uvue的
[
样式不继承
](
https://doc.dcloud.net.cn/uni-app-x/css/#stylenoextends
)
章节
## 属性说明
##
#
属性说明
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |
...
...
@@ -15,7 +15,7 @@
|space |String | |显示连续空格 |钉钉小程序不支持 |
|decode |Boolean|false |是否解码 |百度、钉钉小程序不支持 |
**space 值说明**
#### space 值说明
|值|说明|
|:-|:-|
...
...
@@ -23,13 +23,13 @@
|emsp|中文字符空格大小|
|nbsp|根据字体设置的空格大小|
## 子组件
##
#
子组件
text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、app-vue)和uvue中,可以并只能嵌套text组件。
在nvue中,text组件不能嵌套。
## Tips
##
#
Tips
-
支持
`\n`
方式换行。
-
在app-nvue下,只有
`<text>`
才能包裹文本内容。无法在
`<view>`
组件包裹文本。
...
...
@@ -39,7 +39,7 @@ text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、
-
如果使用
`<span>`
组件编译时会被转换为
`<text>`
。
-
nvue 样式
`word-wrap`
在 Android 平台暂不支持
## 示例
##
#
示例
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/text/text
)
...
...
docs/component/textarea.md
浏览文件 @
74cd0550
##
##
textarea
## textarea
多行输入框。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -49,7 +49,7 @@
|go|右下角按钮为“前往”|
|done|右下角按钮为“完成”|
**示例**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/textarea/textarea
)
#### 示例
[查看示例](https://hellouniapp.dcloud.net.cn/pages/component/textarea/textarea)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -84,7 +84,7 @@ export default {
```
:::
**Tips**
#### tips
-
textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 @submit。
-
如果遇到 value 属性设置不生效的问题参考:
[
组件属性设置不生效解决办法
](
/tutorial/vue-api.md#componentsolutions
)
...
...
docs/component/uniui/color.md
浏览文件 @
74cd0550
`uni-ui`
为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。
# color 颜色
##
#
主色
## 主色
`uni-ui`
的主色使用了令人安静并放松的蓝色。
`uni-ui`
为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。
<div
class=
"color-main"
>
<div
class=
"color-main-top"
style=
"background-color:#2979ff;"
>
...
...
docs/component/uniui/quickstart.md
浏览文件 @
74cd0550
uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
# 开始使用
## 在HBuilderX 新建uni-app项目的模板中,选择uni-ui模板
uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
### 在HBuilderX 新建uni-app项目的模板中,选择uni-ui模板
![
HBuilderX内创建uni-ui项目
](
https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/create-uni-ui-project.jpg
)
由于uni-app独特的
[
easycom
](
https://uniapp.dcloud.io/collocation/pages?id=easycom
)
技术,可以免引用、注册,直接使用各种符合规则的vue组件。
...
...
@@ -12,7 +14,7 @@ uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别
![
uni-ui代码块
](
https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-ui-snippet.jpg
)
##
#
通过 uni_modules 单独安装组件
## 通过 uni_modules 单独安装组件
如果你没有创建uni-ui项目模板,也可以在你的工程里,通过 uni_modules 单独安装需要的某个组件。下表为uni-ui的扩展组件清单,点击每个组件在详情页面可以导入组件到项目下,导入后直接使用即可,无需import和注册。
|组件名|组件说明|
...
...
@@ -61,14 +63,14 @@ uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别
使用
`uni_modules`
方式安装组件库,可以直接通过插件市场导入,通过右键菜单快速更新组件,不需要引用、注册,直接在页面中使用
`uni-ui`
组件。
[
点击安装 uni-ui 组件库
](
https://ext.dcloud.net.cn/plugin?id=55
)
**注意:下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本**
#### 注意:下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本
如不能升级到
`uni_modules`
版本,可以使用
`uni_modules`
安装好对应组件,将组件拷贝到对应目录。
例如需更新
`uni-list`
和
`uni-badge`
,将
`uni_modules>uni-list>components`
和
`uni_modules>uni-badege>components`
下所有目录拷贝到如下目录即可:
**目录示例**
### 目录示例
```
json
┌─components
组件目录
...
...
@@ -111,7 +113,7 @@ uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别
**准备 sass**
#### 准备 sass
`vue-cli`
项目请先安装 sass 及 sass-loader,如在 HBuliderX 中使用,可跳过此步。
...
...
@@ -128,7 +130,7 @@ npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
> 如果 `node` 版本小于 16 ,sass-loader 请使用低于 @11.0.0 的版本,[sass-loader@11.0.0 不支持 vue@2.6.12 ](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)
> 如果 `node` 版本大于 16 , `sass-loader` 建议使用 `v8.x` 版本
**安装 uni-ui**
#### 安装 uni-ui
```
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
...
...
@@ -136,7 +138,7 @@ npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
**配置easycom**
#### 配置easycom
使用
`npm`
安装好
`uni-ui`
之后,需要配置
`easycom`
规则,让
`npm`
安装的组件支持
`easycom`
...
...
@@ -169,7 +171,7 @@ npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
<uni-badge
text=
"3"
type=
"primary"
:inverted=
"true"
></uni-badge>
```
**注意**
### 注意
-
uni-ui 现在只推荐使用
`easycom`
,如自己引用组件,可能会出现组件找不到的问题
-
使用 npm 安装的组件,默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ,导致条件编译失效,需要通过配置
`vue.config.js`
解决:
```
javascript
...
...
docs/component/uniui/resource.md
浏览文件 @
74cd0550
# 设计资源
#
#
设计资源
我们提供uni-ui组件的Sketch设计资源,您可以根据需要进行下载。
Axure资源正在整理和完善中。
...
...
docs/component/uniui/uni-badge.md
浏览文件 @
74cd0550
## uni-badge 数字角标
### 介绍
::: tip 组件名:uni-badge
> 代码块: `uBadge`
...
...
@@ -7,8 +10,6 @@
数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景。
## 介绍
### 基本用法
在
``template``
中使用组件
...
...
@@ -50,7 +51,7 @@
##
示例
##
## 示例
::: warning 注意
直接拷贝示例代码,无法运行 ,示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件。
...
...
docs/component/uniui/uni-breadcrumb.md
浏览文件 @
74cd0550
## uni-breadcrumb 面包屑
::: tip 组件名:uni-breadcrumb
> 代码块: `uBreadcrumb`
...
...
@@ -7,15 +9,15 @@
显示当前页面的路径,快速返回之前的任意页面。
## 介绍
##
#
介绍
### 安装方式
###
#
安装方式
本组件符合
[
easycom
](
https://uniapp.dcloud.io/collocation/pages?id=easycom
)
规范,
`HBuilderX 2.5.5`
起,只需将本组件导入项目,在页面
`template`
中即可直接使用,无需在页面中
`import`
和注册
`components`
。
如需通过
`npm`
方式使用
`uni-ui`
组件,另见文档:
[
https://ext.dcloud.net.cn/plugin?id=55
](
https://ext.dcloud.net.cn/plugin?id=55
)
### 基本用法
###
#
基本用法
在
`template`
中使用组件
...
...
@@ -51,23 +53,23 @@ export default {
};
```
## API
##
#
API
### Breadcrumb Props
###
#
Breadcrumb Props
| 属性名 | 类型 | 默认值 | 说明 |
| :------------: | :----: | :-----: | :--------------: |
| separator | String | 斜杠'/' | 分隔符 |
| separatorClass | String | | 图标分隔符 class |
### Breadcrumb Item Props
###
#
Breadcrumb Item Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-----: | :-----------: | :----: | :-----------------------------------------------------------------------------: |
| to | String | | 路由跳转页面路径 |
| replace | Boolean | | 在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录(仅 h5 支持) |
## 示例
##
##
示例
::: warning 注意
直接拷贝示例代码,无法运行 ,示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件。
...
...
docs/component/uniui/uni-calendar.md
浏览文件 @
74cd0550
# uni-calendar 日历
:::tip 组件名:uni-calendar
> 代码块: `uCalendar`
...
...
docs/component/uniui/uni-card.md
浏览文件 @
74cd0550
# uni-card 卡片
::: tip 组件名:uni-card
> 代码块: `uCard`
...
...
docs/component/uniui/uni-collapse.md
浏览文件 @
74cd0550
# uni-collapse 折叠面板
::: tip 组件名:uni-collapse
> 代码块: `uCollapse`
...
...
docs/component/uniui/uni-combox.md
浏览文件 @
74cd0550
# combox 组合框
::: tip 组件名:uni-combox
> 代码块: `uCombox`
...
...
docs/component/uniui/uni-countdown.md
浏览文件 @
74cd0550
# countdown 倒计时
::: tip 组件名:uni-countdown
> 代码块: `uCountDown`
...
...
docs/component/uniui/uni-data-checkbox.md
浏览文件 @
74cd0550
# uni-data-checkbox 数据选择器
::: tip 组件名:uni-data-checkbox
> 代码块: `uDataCheckbox`
...
...
docs/component/uniui/uni-data-picker.md
浏览文件 @
74cd0550
# uni-data-picker 级联选择器
::: tip 组件名:uni-data-picker
> 代码块: `uDataPicker`
> 关联组件:`uni-data-pickerview`、`uni-load-more`。
...
...
docs/component/uniui/uni-data-select.md
浏览文件 @
74cd0550
# uni-data-select 下拉框
::: tip 组件名:uni-data-select
> 代码块: `uDataSelect`
...
...
docs/component/uniui/uni-dateformat.md
浏览文件 @
74cd0550
# uni-dateformt 日期格式化
::: tip 组件名:uni-dateformat
> 代码块: `uDateformat`
...
...
docs/component/uniui/uni-datetime-picker.md
浏览文件 @
74cd0550
# uni-datetime-picker 日期选择器
::: danger 重要通知
组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载
*非uni_modules版本*
,旧版本将不再维护
...
...
docs/component/uniui/uni-drawer.md
浏览文件 @
74cd0550
# uni-drawer 抽屉
::: tip 组件名:uni-drawer
> 代码块: `uDrawer`
...
...
docs/component/uniui/uni-fab.md
浏览文件 @
74cd0550
# uni-fab 悬浮按钮
::: tip 组件名:uni-fab
> 代码块: `uFab`
...
...
docs/component/uniui/uni-fav.md
浏览文件 @
74cd0550
# uni-fav 收藏按钮
::: tip 组件名:uni-fav
> 代码块: `uFav`
...
...
docs/component/uniui/uni-file-picker.md
浏览文件 @
74cd0550
# uni-file-picker 文件选择上传
::: tip 组件名:uni-file-picker
> 代码块: `uFilePicker`
...
...
docs/component/uniui/uni-forms.md
浏览文件 @
74cd0550
# uni-forms 表单
::: tip 组件名:uni-forms
> 代码块: `uForms`、`uni-forms-item`
> 关联组件:`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
...
...
docs/component/uniui/uni-goods-nav.md
浏览文件 @
74cd0550
# uni-goods-nav 商品导航
::: tip 组件名:uni-goods-nav
> 代码块: `uGoodsNav`
...
...
docs/component/uniui/uni-grid.md
浏览文件 @
74cd0550
# uni-grid 宫格
::: tip 组件名:uni-grid
> 代码块: `uGrid`
...
...
@@ -60,7 +61,7 @@
### Grid Props
**uni-grid 属性说明:**
### uni-grid Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
...
...
docs/component/uniui/uni-group.md
浏览文件 @
74cd0550
# uni-group 分组
::: tip 组件名:uni-group
> 代码块: `uGroup`
...
...
docs/component/uniui/uni-indexed-list.md
浏览文件 @
74cd0550
# uni-indexed-list 索引列表
::: tip 组件名:uni-indexed-list
> 代码块: `uIndexedList`
...
...
docs/component/uniui/uni-link.md
浏览文件 @
74cd0550
# uni-link 超链接
::: tip 组件名:uni-link
> 代码块: `uLink`
...
...
docs/component/uniui/uni-list.md
浏览文件 @
74cd0550
# uni-list 列表
::: tip 组件名:uni-list
> 代码块: `uList`、`uListItem`
> 关联组件:`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`
...
...
@@ -251,7 +253,7 @@ switchTab|同 uni.switchTab()
> 开发者可以只用1个插槽,也可以3个一起使用。在插槽中可自主编写view标签,实现自己所需的效果。
**示例**
#### 示例
```
html
<uni-list>
...
...
docs/component/uniui/uni-load-more.md
浏览文件 @
74cd0550
# uni-load-more 加载更多
::: tip 组件名:uni-load-more
> 代码块: `uLoadMore`
...
...
docs/component/uniui/uni-nav-bar.md
浏览文件 @
74cd0550
# uni-nav-bar 自定义导航栏
::: tip 组件名:uni-nav-bar
> 代码块: `uNavBar`
...
...
@@ -118,7 +119,7 @@ Tips:
|rightWidth|Number/String|120rpx|导航栏右侧插槽宽度|
|stat|Boolean/String|120rpx|是否开启统计标题功能。
**注意:只有使用title 属性 ,且开启了统计功能才生效**
|
**Tips**
#### tips
-
`leftWidth`
和
`rightWidth`
如无必要不需要设置
-
`leftWidth`
和
`rightWidth`
如需设置 ,只有两个值相同,才能保证
`title`
居中 ,如设置值过大,需要注意到
`title`
被覆盖的可能
...
...
docs/component/uniui/uni-notice-bar.md
浏览文件 @
74cd0550
# uni-notice-bar 通告栏
::: tip 组件名:uni-notice-bar
> 代码块: `uNoticeBar`
...
...
docs/component/uniui/uni-number-box.md
浏览文件 @
74cd0550
# uni-number-box 数字输入框
::: tip 组件名:uni-number-box
> 代码块: `uNumberBox`
...
...
docs/component/uniui/uni-pagination.md
浏览文件 @
74cd0550
# uni-pagination 分页器
::: tip 组件名:uni-pagination
> 代码块: `uPagination`
...
...
docs/component/uniui/uni-popup.md
浏览文件 @
74cd0550
...
...
@@ -53,7 +53,7 @@ export default {
而也有特例,需要我们主动去设置背景色,例如
`type = 'bottom'`
的时候 ,在异型屏中遇到了底部安全区问题(如 iphone 11),因为
`uni-popup`
的主要内容避开了安全区(设置
`safe-area:true`
),导致底部的颜色我们无法自定义,这时候使用
`background-color`
就可以解决这个问题。
**底部弹窗示例**
#### 底部弹窗示例
```
html
<button
@
click=
"open"
>
打开弹窗
</button>
...
...
@@ -63,7 +63,7 @@ export default {
### 禁用打开动画
在某些场景 ,可能不希望弹层有动画效果 ,只需要将
`animation`
属性设置为
`false`
即可以关闭动画。
**居中弹窗示例**
#### 居中弹窗示例
```
html
<button
@
click=
"open"
>
打开弹窗
</button>
...
...
@@ -73,7 +73,7 @@ export default {
### 禁用点击遮罩关闭
默认情况下,点击遮罩会自动关闭
`uni-popup`
,如不想点击关闭,只需将
`mask-click`
设置为
`false`
,这时候要关闭
`uni-popup`
,只能手动调用
`close`
方法。
**示例**
#### 遮罩示例
```
html
<button
@
click=
"open"
>
打开弹窗
</button>
...
...
@@ -152,7 +152,7 @@ export default {
将
`uni-popup`
的
`type`
属性改为
`message`
,并引入对应组件即可使用消息提示 ,
*该组件不支持单独使用*
**示例**
#### 示例
```
html
<uni-popup
ref=
"popup"
type=
"message"
>
...
...
@@ -187,7 +187,7 @@ export default {
将
`uni-popup`
的
`type`
属性改为
`dialog`
,并引入对应组件即可使用对话框 ,
*该组件不支持单独使用*
**示例**
#### 示例
```
html
<button
@
click=
"open"
>
打开弹窗
</button>
...
...
docs/component/uniui/uni-rate.md
浏览文件 @
74cd0550
# uni-rate 评分
::: tip 组件名:uni-rate
> 代码块: `uRate`
...
...
docs/component/uniui/uni-row.md
浏览文件 @
74cd0550
# uni-row 布局-行
::: tip 组件名 uni-row、uni-col
> 代码块: `uRow`、`uCol`
...
...
docs/component/uniui/uni-sass.md
浏览文件 @
74cd0550
# uni-sass 辅助样式
`uni-scss`
是
`uni-ui`
提供的一套全局样式 ,通过一些简单的类名和
`sass`
变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
...
...
docs/component/uniui/uni-search-bar.md
浏览文件 @
74cd0550
# uni-search-bar
::: tip 组件名:uni-search-bar
> 代码块: `uSearchBar`
...
...
docs/component/uniui/uni-section.md
浏览文件 @
74cd0550
# uni-section 标题栏
::: tip 组件名:uni-section
> 代码块: `uSection`
...
...
docs/component/uniui/uni-segmented-control.md
浏览文件 @
74cd0550
# uni-segmented-control 分段器
::: tip 组件名:uni-segmented-control
> 代码块: `uSegmentedControl`
...
...
docs/component/uniui/uni-steps.md
浏览文件 @
74cd0550
# uni-steps 步骤条
::: tip 组件名:uni-steps
> 代码块: `uSteps`
...
...
docs/component/uniui/uni-swipe-action.md
浏览文件 @
74cd0550
# uni-swipe-action 滑动操作
::: tip 组件名:uni-swipe-action
> 代码块: `uSwipeAction`、`uSwipeActionItem`
...
...
docs/component/uniui/uni-swiper-dot.md
浏览文件 @
74cd0550
# uni-swiper-dot 轮播图指示点
::: tip 组件名:uni-swiper-dot
> 代码块: `uSwiperDot`
...
...
docs/component/uniui/uni-table.md
浏览文件 @
74cd0550
# uni-table 表格
::: tip 组件名:uni-table
> 代码块: `uTable`
...
...
docs/component/uniui/uni-tag.md
浏览文件 @
74cd0550
# uni-tag 标签
::: tip 组件名:uni-tag
> 代码块: `uTag`
...
...
docs/component/uniui/uni-title.md
浏览文件 @
74cd0550
# uni-title 标题
::: tip 组件名:uni-title
> 代码块: `uTitle`
...
...
docs/component/uniui/uni-tooltip.md
浏览文件 @
74cd0550
# uni-tooltip 文字提示
::: tip 组件名:uni-tooltip
> 代码块: `utooltip`
...
...
docs/component/uniui/uni-transition.md
浏览文件 @
74cd0550
# uni-transition 过渡动画
::: tip 组件名:uni-transition
> 代码块: `uTransition`
...
...
docs/component/video.md
浏览文件 @
74cd0550
##
##
video
## video
视频播放组件。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
...
...
@@ -86,7 +86,7 @@
|center|视频中间|
**示例**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/video/video
)
#### 示例
[查看示例](https://hellouniapp.dcloud.net.cn/pages/component/video/video)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/video/video
> Template
...
...
docs/component/view.md
浏览文件 @
74cd0550
所有的视图组件,包括view、swiper等,本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
### view
## view
视图容器。
所有的视图组件,包括view、swiper等,本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
它类似于传统html中的div,用于包裹各种元素内容。
如果使用
[
nvue
](
https://uniapp.dcloud.io/tutorial/nvue-outline
)
,则需注意,包裹文字应该使用
`<text>`
组件。
**属性说明**
#### 属性说明
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
...
...
@@ -17,7 +19,7 @@
|hover-start-time|Number|50|按住后多久出现点击态,单位毫秒|
|hover-stay-time|Number|400|手指松开后点击态保留时间,单位毫秒|
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/view/view
)
#### 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/view/view)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
...
...
@@ -52,7 +54,7 @@
```
:::
**Tips**
#### tips
-
小程序平台如果使用
`<div>`
,编译时会被转换为
`<view>`
。
-
App平台 Vue2 项目在节点非常多时可以尝试使用
`<div>`
替换
`<view>`
以提升渲染性能。
docs/component/vue-component.md
浏览文件 @
74cd0550
##
#
component
## component
渲染一个“元组件”为动态组件。依
`is`
的值,来决定哪个组件被渲染。
[
详见
](
https://v2.cn.vuejs.org/v2/api/#component
)
**平台差异说明**
#### 平台差异说明
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|京东小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
...
@@ -23,14 +23,14 @@
`<block/>`
在不同的平台表现存在一定差异,推荐统一使用
`<template/>`
。
**平台差异说明**
#### 平台差异说明
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|京东小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |√ |√ |√ |√ |√ |√ |√ |√ |√ |
**代码示例**
#### 示例
```
html
...
...
@@ -74,7 +74,7 @@
`<transition>`
元素作为单个元素/组件的过渡效果。
`<transition>`
只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
[
详见
](
https://v2.cn.vuejs.org/v2/api/#transition
)
**平台差异说明**
#### 平台差异说明
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|京东小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
...
@@ -89,7 +89,7 @@
**平台差异说明**
#### 平台差异说明
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|京东小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
...
@@ -103,7 +103,7 @@
`<keep-alive>`
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和
`<transition>`
相似,
`<keep-alive>`
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
[
详见
](
https://v2.cn.vuejs.org/v2/api/#keep-alive
)
**平台差异说明**
#### 平台差异说明
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|京东小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
...
@@ -118,7 +118,7 @@
详细用法,请参考下面教程的链接。
[
通过插槽分发内容
](
https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9
)
**平台差异说明**
#### 平台差异说明
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|京东小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
...
docs/component/waterfall.md
浏览文件 @
74cd0550
...
...
@@ -62,7 +62,7 @@ app端nvue专用组件。
-
appear:用于监听子组件出现事件(一般绑定于子组件之上例如:监听最后一个元素出现,加载新的数据)
-
disappear:用于监听子组件滑出屏幕事件(一般绑定于子组件之上)
**注意**
#### 注意
-
waterfall是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
-
如出现waterfall列表下边大面积空白区域(多列和单列时的整体高度相同,多列展示没有高度自适应),那么可以将waterfall放到父容器下边,给父容器高度设置为窗口高度,除瀑布流展示的列表外,其他的组件都放在
<header>
中即可。
示例代码如下:
...
...
docs/component/web-view.md
浏览文件 @
74cd0550
...
...
@@ -4,7 +4,7 @@
> 各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
**属性说明**
#### 属性说明
|属性名|类型|说明|平台差异说明|
|:-|:-|:-|:-|
...
...
@@ -19,7 +19,7 @@
|@load|EventHandler|网页加载成功时候触发此事件。|微信小程序、支付宝小程序、抖音小程序、QQ小程序|
|@error|EventHandler|网页加载失败的时候触发此事件。|微信小程序、支付宝小程序、抖音小程序、QQ小程序|
**注意**
#### 注意
-
`update-title`
仅支持
`App-vue`
。
`小程序`
恒为
`true`
,
`H5、nvue`
恒为
`false`
**src**
...
...
@@ -106,7 +106,7 @@
</code>
</pre>
**示例**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/web-view/web-view
)
#### 示例
[查看示例](https://hellouniapp.dcloud.net.cn/pages/component/web-view/web-view)
```
html
<template>
<view>
...
...
@@ -130,7 +130,7 @@
### uni.postMessage(OBJECT)
网页向应用发送消息,在
`<web-view>`
的
`message`
事件回调
`event.detail.data`
中接收消息。
**Tips**
#### tips
-
传递的消息信息,必须写在 data 对象中。
-
`event.detail.data`
中的数据,以数组的形式接收每次 post 的消息。(注:支付宝小程序除外,支付宝小程序中以对象形式接受)
...
...
@@ -147,7 +147,7 @@
|smartprogram|Boolean|百度小程序|
|miniprogram|Boolean|支付宝小程序|
**示例**
#### 示例
在
`<web-view>`
加载的 HTML 中,添加以下代码:
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录