Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3206
Star 106
Fork 814
unidocs-zh
unidocs-zh
提交 74cd0550 编写于 作者: H HRK
浏览文件
操作

fix：标题级别小修，更正文档结构

上级 7e0c4a1c
隐藏空白更改
内联 并排
Showing with 1523 addition and 1465 deletion
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 事件|&nbsp;|
**示例** [查看演示](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}|&nbsp;快手小程序不支持|
|@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,8 +44,8 @@
- [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
```html
......
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|是否禁用|&nbsp;|
#### 日期选择器
### 日期选择器
``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,12 +17,12 @@
|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模板，可直接体验完整示例。
:::preview https://hellouniapp.dcloud.net.cn/pages/component/progress/progress
:::preview https://hellouniapp.dcloud.net.cn/pages/component/progress/progress
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在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|&nbsp;|
**示例** [查看演示](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|&nbsp;|
|@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
::: tip 组件名：uni-badge
> 代码块： `uBadge`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-badge)
:::
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。
## 介绍
### 基本用法
在 ``template`` 中使用组件
```html
<uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
<button type="default">右下</button>
</uni-badge>
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
```
## 属性/方法
### Badge Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|text|String|-|角标内容|
|type|String|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
|size|String|normal |Badge 大小，可取值：normal、small|
|is-dot|Boolean|false|不展示数字，只有一个小点|
|max-num|String/Numbuer|99|展示封顶的数字值，超过 99 显示99+|
|custom-style|Object|{}|自定义 Badge 样式, 样式对象语法|
|inverted|Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色|
|absolute(不支持 nvue)|String|rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） |
|offset|Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）|
### Badge Events
|事件名|事件说明|返回参数|
|:-:|:-:|:-:|
|@click |点击 Badge 触发事件| -|
## 示例
::: warning 注意
直接拷贝示例代码，无法运行 ，示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-badge) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
```html
## uni-badge 数字角标
### 介绍
::: tip 组件名：uni-badge
> 代码块： `uBadge`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-badge)
:::
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
<button type="default">右下</button>
</uni-badge>
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
```
## 属性/方法
### Badge Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|text|String|-|角标内容|
|type|String|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
|size|String|normal |Badge 大小，可取值：normal、small|
|is-dot|Boolean|false|不展示数字，只有一个小点|
|max-num|String/Numbuer|99|展示封顶的数字值，超过 99 显示99+|
|custom-style|Object|{}|自定义 Badge 样式, 样式对象语法|
|inverted|Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色|
|absolute(不支持 nvue)|String|rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） |
|offset|Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）|
### Badge Events
|事件名|事件说明|返回参数|
|:-:|:-:|:-:|
|@click |点击 Badge 触发事件| -|
#### 示例
::: warning 注意
直接拷贝示例代码，无法运行 ，示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-badge) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
```html
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
......@@ -72,7 +73,7 @@
<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
<uni-badge class="uni-badge-left-margin" text="123" type="info" />
</view>
</uni-section>
</uni-section>
<uni-section title="无底色" type="line" padding>
<view class="example-body">
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
......@@ -171,7 +172,7 @@
color: #fff;
font-size: 12px;
}
</style>
:::
</style>
:::
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`
......@@ -287,156 +288,156 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox
> Template
``` vue
<template>
<view>
<uni-card is-full>
<text class="uni-h6">通过数据驱动的单选框和复选框，可直接通过连接 uniCloud 获取数据，同时可以配合表单组件 uni-forms 使用</text>
</uni-card>
<uni-section title="单选" type="line">
<view class="uni-px-5 uni-pb-5">
<view class="text">单选选中：{{JSON.stringify(radio1)}}</view>
<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="多选" subTitle="使用multiple属性开启多选" type="line">
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox1)}}</view>
<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="最大最小值" subTitle="使用 min / max 设置多选的最大最小值,单选无效">
<view class="uni-px-5 uni-pb-5">
<view class="text">选中：{{JSON.stringify(checkbox6)}}</view>
<uni-data-checkbox min="1" max="2" multiple v-model="checkbox6" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="更多样式 - button" subTitle="使用mode=button属性使用按钮样式" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio2)}}</view>
<uni-data-checkbox mode="button" v-model="radio2" :localdata="sex"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox2)}}</view>
<uni-data-checkbox mode="button" multiple v-model="checkbox2" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio3)}}</view>
<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox3)}}</view>
<uni-data-checkbox mode="tag" multiple v-model="checkbox3" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="禁用" subTitle="数据中使用 disable 属性实现单独禁用,组件使用 disable 属性实现全部禁用" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio4)}}</view>
<uni-data-checkbox mode="button" v-model="radio4" :localdata="sex1"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox4)}}</view>
<uni-data-checkbox mode="button" multiple v-model="checkbox4" :localdata="hobby2">
</uni-data-checkbox>
</view>
</uni-section>
<uni-section title="自定义高亮颜色" subTitle="使用 selectedColor 属性修改颜色" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio5)}}</view>
<uni-data-checkbox selectedColor="red" v-model="radio5" :localdata="sex1"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox5)}}</view>
<uni-data-checkbox selectedColor="red" multiple v-model="checkbox5" :localdata="hobby2">
</uni-data-checkbox>
</view>
</uni-section>
</view>
</template>
<template>
<view>
<uni-card is-full>
<text class="uni-h6">通过数据驱动的单选框和复选框，可直接通过连接 uniCloud 获取数据，同时可以配合表单组件 uni-forms 使用</text>
</uni-card>
<uni-section title="单选" type="line">
<view class="uni-px-5 uni-pb-5">
<view class="text">单选选中：{{JSON.stringify(radio1)}}</view>
<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="多选" subTitle="使用multiple属性开启多选" type="line">
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox1)}}</view>
<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="最大最小值" subTitle="使用 min / max 设置多选的最大最小值,单选无效">
<view class="uni-px-5 uni-pb-5">
<view class="text">选中：{{JSON.stringify(checkbox6)}}</view>
<uni-data-checkbox min="1" max="2" multiple v-model="checkbox6" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="更多样式 - button" subTitle="使用mode=button属性使用按钮样式" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio2)}}</view>
<uni-data-checkbox mode="button" v-model="radio2" :localdata="sex"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox2)}}</view>
<uni-data-checkbox mode="button" multiple v-model="checkbox2" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio3)}}</view>
<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox3)}}</view>
<uni-data-checkbox mode="tag" multiple v-model="checkbox3" :localdata="hobby"></uni-data-checkbox>
</view>
</uni-section>
<uni-section title="禁用" subTitle="数据中使用 disable 属性实现单独禁用,组件使用 disable 属性实现全部禁用" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio4)}}</view>
<uni-data-checkbox mode="button" v-model="radio4" :localdata="sex1"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox4)}}</view>
<uni-data-checkbox mode="button" multiple v-model="checkbox4" :localdata="hobby2">
</uni-data-checkbox>
</view>
</uni-section>
<uni-section title="自定义高亮颜色" subTitle="使用 selectedColor 属性修改颜色" type="line">
<view class="uni-px-5">
<view class="text">单选选中：{{JSON.stringify(radio5)}}</view>
<uni-data-checkbox selectedColor="red" v-model="radio5" :localdata="sex1"></uni-data-checkbox>
</view>
<view class="uni-px-5 uni-pb-5">
<view class="text">多选选中：{{JSON.stringify(checkbox5)}}</view>
<uni-data-checkbox selectedColor="red" multiple v-model="checkbox5" :localdata="hobby2">
</uni-data-checkbox>
</view>
</uni-section>
</view>
</template>
```
> Script
``` vue
<script>
export default {
data() {
return {
radio1: 0,
radio2: 0,
radio3: 0,
radio4: 0,
radio5: 0,
radio6: 0,
checkbox1: [0],
checkbox2: [0],
checkbox3: [0],
checkbox4: [0],
checkbox5: [0],
checkbox6: [0],
sex: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '未知',
value: 2
}],
sex1: [{
text: '男',
value: 0
}, {
text: '女',
value: 1,
disable: true
}, {
text: '未知',
value: 2
}],
hobby: [{
text: '足球',
value: 0
}, {
text: '篮球',
value: 1
}, {
text: '游泳',
value: 2
}],
hobby2: [{
text: '足球',
value: 0,
disable: true
}, {
text: '篮球',
value: 1,
disable: true
}, {
text: '游泳',
value: 2
}],
}
}
}
</script>
``` vue
<script>
export default {
data() {
return {
radio1: 0,
radio2: 0,
radio3: 0,
radio4: 0,
radio5: 0,
radio6: 0,
checkbox1: [0],
checkbox2: [0],
checkbox3: [0],
checkbox4: [0],
checkbox5: [0],
checkbox6: [0],
sex: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '未知',
value: 2
}],
sex1: [{
text: '男',
value: 0
}, {
text: '女',
value: 1,
disable: true
}, {
text: '未知',
value: 2
}],
hobby: [{
text: '足球',
value: 0
}, {
text: '篮球',
value: 1
}, {
text: '游泳',
value: 2
}],
hobby2: [{
text: '足球',
value: 0,
disable: true
}, {
text: '篮球',
value: 1,
disable: true
}, {
text: '游泳',
value: 2
}],
}
}
}
</script>
```
> Style
``` vue
<style lang="scss">
.text {
font-size: 12px;
color: #666;
margin-top: 5px;
``` vue
<style lang="scss">
.text {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.uni-px-5 {
padding-left: 10px;
......@@ -444,7 +445,7 @@
}
.uni-pb-5 {
padding-bottom: 10px;
}
}
</style>
```
......
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`
......@@ -79,12 +80,12 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer
> Template
``` html
<template>
<view>
<uni-card is-full :is-shadow="false">
<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
</uni-card>
<template>
<view>
<uni-card is-full :is-shadow="false">
<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
</uni-card>
<uni-section title="左侧滑出" type="line">
<view class="example-body">
<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
......@@ -95,8 +96,8 @@
</view>
</uni-drawer>
</view>
</uni-section>
</uni-section>
<uni-section title="右侧滑出" type="line">
<view class="example-body">
<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
......@@ -120,58 +121,58 @@
</view>
</uni-drawer>
</view>
</uni-section>
</view>
</uni-section>
</view>
</template>
```
> Script
``` html
<script>
export default {
data() {
return {
showRight: false,
showLeft: false
}
},
methods: {
confirm() {},
// 打开窗口
showDrawer(e) {
this.$refs[e].open()
},
// 关闭窗口
closeDrawer(e) {
this.$refs[e].close()
},
// 抽屉状态发生变化触发
change(e, type) {
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
this[type] = e
}
},
onNavigationBarButtonTap(e) {
if (this.showLeft) {
this.$refs.showLeft.close()
} else {
this.$refs.showLeft.open()
}
},
// app端拦截返回事件 ，仅app端生效
onBackPress() {
if (this.showRight || this.showLeft) {
this.$refs.showLeft.close()
this.$refs.showRight.close()
return true
}
}
}
``` html
<script>
export default {
data() {
return {
showRight: false,
showLeft: false
}
},
methods: {
confirm() {},
// 打开窗口
showDrawer(e) {
this.$refs[e].open()
},
// 关闭窗口
closeDrawer(e) {
this.$refs[e].close()
},
// 抽屉状态发生变化触发
change(e, type) {
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
this[type] = e
}
},
onNavigationBarButtonTap(e) {
if (this.showLeft) {
this.$refs.showLeft.close()
} else {
this.$refs.showLeft.open()
}
},
// app端拦截返回事件 ，仅app端生效
onBackPress() {
if (this.showRight || this.showLeft) {
this.$refs.showLeft.close()
this.$refs.showRight.close()
return true
}
}
}
</script>
```
> Style
``` html
<style lang="scss">
``` html
<style lang="scss">
.example-body {
padding: 10px;
}
......@@ -205,7 +206,7 @@
}
.close {
padding: 10px;
}
}
</style>
```
......
docs/component/uniui/uni-fab.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-fab
> 代码块： `uFab`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fab)
:::
点击可展开一个图形按钮菜单
## 介绍
::: warning 注意事项
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 不建议动态修改属性，可能会耗损部分性能。
- 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
- 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。
- 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
:::
### 基本用法
在 `template` 中使用组件
```html
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
```
## API
### Fab Props
|属性名|类型| 默认值| 说明|
|:-:| :-:| :-:| :-:|
|pattern| Object| -| 可选样式配置项|
|horizontal| String| 'left'| 水平对齐方式。`left`:左对齐，`right`：右对齐|
|vertical| String| 'bottom'| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐|
|direction | String| 'horizontal'| 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 |
|popMenu| Boolean| true| 是否使用弹出菜单|
|content| Array| -| 展开菜单内容配置项|
**pattern配置项：**
|参数|类型 | 默认值 |说明|
|:-:|:-:| :-:| :-:|
|color| String | #3c3e49| 文字默认颜色|
|selectedColor| String | #007AFF| 文字选中时的颜色|
|backgroundColor| String| #ffffff| 背景色|
|buttonColor| String| #3c3e49| 按钮背景色|
|icon| String| plusempty| 自定义图标，图标来自 [`uni-icons`](./uni-icons.md) |
**content配置项：**
| 参数|类型 | 说明|
| :-:| :-:| :-:| :-:|
| iconPath| String| 图片路径|
| selectedIconPath| String | 选中后图片路径|
| text| String | 文字|
| active| Boolean| 是否选中当前 |
### Fab Events
| 参数|类型| 说明|
| :-:| :-:| :-:|
| @trigger | Function | 展开菜单点击事件，返回点击信息|
| @fabClick | Function | 悬浮按钮点击事件 |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fab) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab
> Template
``` html
# uni-fab 悬浮按钮
::: tip 组件名：uni-fab
> 代码块： `uFab`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fab)
:::
点击可展开一个图形按钮菜单
## 介绍
::: warning 注意事项
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 不建议动态修改属性，可能会耗损部分性能。
- 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
- 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。
- 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
:::
### 基本用法
在 `template` 中使用组件
```html
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
```
## API
### Fab Props
|属性名|类型| 默认值| 说明|
|:-:| :-:| :-:| :-:|
|pattern| Object| -| 可选样式配置项|
|horizontal| String| 'left'| 水平对齐方式。`left`:左对齐，`right`：右对齐|
|vertical| String| 'bottom'| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐|
|direction | String| 'horizontal'| 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 |
|popMenu| Boolean| true| 是否使用弹出菜单|
|content| Array| -| 展开菜单内容配置项|
**pattern配置项：**
|参数|类型 | 默认值 |说明|
|:-:|:-:| :-:| :-:|
|color| String | #3c3e49| 文字默认颜色|
|selectedColor| String | #007AFF| 文字选中时的颜色|
|backgroundColor| String| #ffffff| 背景色|
|buttonColor| String| #3c3e49| 按钮背景色|
|icon| String| plusempty| 自定义图标，图标来自 [`uni-icons`](./uni-icons.md) |
**content配置项：**
| 参数|类型 | 说明|
| :-:| :-:| :-:| :-:|
| iconPath| String| 图片路径|
| selectedIconPath| String | 选中后图片路径|
| text| String | 文字|
| active| Boolean| 是否选中当前 |
### Fab Events
| 参数|类型| 说明|
| :-:| :-:| :-:|
| @trigger | Function | 展开菜单点击事件，返回点击信息|
| @fabClick | Function | 悬浮按钮点击事件 |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fab) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab
> Template
``` html
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
......@@ -109,9 +110,9 @@
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
</view>
</template>
```
> Script
```
> Script
``` html
<script>
export default {
......@@ -204,8 +205,8 @@
}
}
</script>
```
> Style
```
> Style
``` html
<style lang="scss">
.warp {
......@@ -215,10 +216,10 @@
.button {
margin-bottom: 10px;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)
\ No newline at end of file
docs/component/uniui/uni-fav.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-fav
> 代码块： `uFav`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fav)
:::
用于收藏功能，可点击切换选中、不选中的状态。
## 介绍
### 基本用法
```html
<uni-fav :checked="checked" @click="onClick"/>
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
```
## API
### Fav Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|star |Boolean|true |按钮是否带星星 |
|bgColor |String |#eeeeee |未收藏时的背景色 |
|bgColorChecked |String |#007aff |已收藏时的背景色 |
|fgColor |String |#666666 |未收藏时的文字颜色 |
|fgColorChecked |String |#FFFFFF |已收藏时的文字颜色 |
|circle |Boolean|false |是否为圆角 |
|checked |Boolean|false |是否为已收藏 |
|contentText |Object |```{contentDefault: '收藏',contentFav: '已收藏'}```|收藏按钮文字 |
### Fav Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击 fav按钮 触发事件 |- |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fav) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav
> Template
``` html
# uni-fav 收藏按钮
::: tip 组件名：uni-fav
> 代码块： `uFav`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fav)
:::
用于收藏功能，可点击切换选中、不选中的状态。
## 介绍
### 基本用法
```html
<uni-fav :checked="checked" @click="onClick"/>
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
```
## API
### Fav Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|star |Boolean|true |按钮是否带星星 |
|bgColor |String |#eeeeee |未收藏时的背景色 |
|bgColorChecked |String |#007aff |已收藏时的背景色 |
|fgColor |String |#666666 |未收藏时的文字颜色 |
|fgColorChecked |String |#FFFFFF |已收藏时的文字颜色 |
|circle |Boolean|false |是否为圆角 |
|checked |Boolean|false |是否为已收藏 |
|contentText |Object |```{contentDefault: '收藏',contentFav: '已收藏'}```|收藏按钮文字 |
### Fav Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击 fav按钮 触发事件 |- |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fav) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav
> Template
``` html
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
......@@ -83,8 +84,8 @@
</view>
</view>
</template>
```
> Script
```
> Script
``` html
<script>
export default {
......@@ -107,8 +108,8 @@
}
}
</script>
```
> Style
```
> Style
``` html
<style lang="scss">
.example-body {
......@@ -144,9 +145,9 @@
.favBtn-nav {
// left:-50rpx;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav)
\ No newline at end of file
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`
......@@ -109,120 +111,120 @@ export default {
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav
> Template
``` html
<template>
<view class="uni-container">
<uni-card is-full>
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
</uni-card>
<uni-section title="基础用法" type="line">
<uni-goods-nav @click="onClick" />
</uni-section>
<uni-section title="自定义用法" type="line">
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
@buttonClick="buttonClick" />
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
@buttonClick="buttonClick" style="margin-top: 20px;" />
</uni-section>
<view class="goods-carts">
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</view>
</template>
<template>
<view class="uni-container">
<uni-card is-full>
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
</uni-card>
<uni-section title="基础用法" type="line">
<uni-goods-nav @click="onClick" />
</uni-section>
<uni-section title="自定义用法" type="line">
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
@buttonClick="buttonClick" />
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
@buttonClick="buttonClick" style="margin-top: 20px;" />
</uni-section>
<view class="goods-carts">
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</view>
</template>
```
> Script
``` html
<script>
export default {
components: {},
data() {
return {
options: [{
icon: 'chat',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor: '#007aff',
infoColor: "#f5f5f5"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}
],
customButtonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
color: '#fff'
}
],
customButtonGroup1: [{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}]
}
},
onLoad() {},
methods: {
onClick(e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick(e) {
console.log(e)
this.options[2].info++
}
}
}
</script>
``` html
<script>
export default {
components: {},
data() {
return {
options: [{
icon: 'chat',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor: '#007aff',
infoColor: "#f5f5f5"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}
],
customButtonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
color: '#fff'
}
],
customButtonGroup1: [{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}]
}
},
onLoad() {},
methods: {
onClick(e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick(e) {
console.log(e)
this.options[2].info++
}
}
}
</script>
```
> Style
``` html
<style lang="scss">
.example-body {
padding: 0;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
.goods-carts {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
position: fixed;
left: 0;
right: 0;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
bottom: 0;
}
``` html
<style lang="scss">
.example-body {
padding: 0;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
.goods-carts {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
position: fixed;
left: 0;
right: 0;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
bottom: 0;
}
</style>
```
......
docs/component/uniui/uni-grid.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-grid
> 代码块： `uGrid`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-grid)
:::
宫格组件。
## 介绍
::: warning 注意事项
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
- Grid 组件仅在自定义组件模式下支持
- column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译`
- 为了避免高度显示错误组件内必须要有内容
:::
### 基本用法
```html
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
```
### 不带边框并矩形显示
```html
<uni-grid :column="3" :showBorder="false" :square="false">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
```
## API
### Grid Props
**uni-grid 属性说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|column |Number |3 |每列显示个数 |
|borderColor|String |#d0dee5|边框颜色 |
|showBorder |Boolean|true |是否显示边框 |
|square |Boolean|true |是否方形显示 |
|highlight |Boolean|true |点击背景是否高亮 |
### Grid Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|点击 grid 触发 |e={detail:{index:0}}，index 为当前点击 grid下标|
### GridItem Props
|属性名|类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|index|Number |- |子组件的唯一标识 ，点击grid会返回当前的标识|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-grid) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid
> Template
``` html
# uni-grid 宫格
::: tip 组件名：uni-grid
> 代码块： `uGrid`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-grid)
:::
宫格组件。
## 介绍
::: warning 注意事项
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
- Grid 组件仅在自定义组件模式下支持
- column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译`
- 为了避免高度显示错误组件内必须要有内容
:::
### 基本用法
```html
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
```
### 不带边框并矩形显示
```html
<uni-grid :column="3" :showBorder="false" :square="false">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
```
## API
### Grid Props
### uni-grid Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|column |Number |3 |每列显示个数 |
|borderColor|String |#d0dee5|边框颜色 |
|showBorder |Boolean|true |是否显示边框 |
|square |Boolean|true |是否方形显示 |
|highlight |Boolean|true |点击背景是否高亮 |
### Grid Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|点击 grid 触发 |e={detail:{index:0}}，index 为当前点击 grid下标|
### GridItem Props
|属性名|类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|index|Number |- |子组件的唯一标识 ，点击grid会返回当前的标识|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-grid) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid
> Template
``` html
<template>
<view class="warp">
<uni-card is-full :is-shadow="false">
......@@ -221,8 +222,8 @@
</uni-section>
</view>
</template>
```
> Script
```
> Script
``` html
<script>
export default {
......@@ -309,8 +310,8 @@
}
}
</script>
```
> Style
```
> Style
``` html
<style lang="scss">
.image {
......@@ -381,9 +382,9 @@
}
/* #endif */
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid)
\ No newline at end of file
docs/component/uniui/uni-group.md
浏览文件 @ 74cd0550
# uni-group 分组
::: tip 组件名：uni-group
> 代码块： `uGroup`
......@@ -41,43 +43,43 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/group/group
> Template
``` html
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
</uni-card>
<uni-section title="基础分组" type="line">
<uni-group>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
<uni-group title="基本模式" margin-top="20">
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
</uni-section>
<uni-section title="卡片分组" type="line">
<uni-group mode="card">
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
<uni-group title="card 模式" mode="card">
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
</uni-section>
</view>
</template>
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
</uni-card>
<uni-section title="基础分组" type="line">
<uni-group>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
<uni-group title="基本模式" margin-top="20">
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
</uni-section>
<uni-section title="卡片分组" type="line">
<uni-group mode="card">
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
<uni-group title="card 模式" mode="card">
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
<view> 分组内容 </view>
</uni-group>
</uni-section>
</view>
</template>
```
:::
......
docs/component/uniui/uni-indexed-list.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-indexed-list
> 代码块： `uIndexedList`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)
:::
用于展示索引列表。
## 介绍
### 基本用法
```html
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
```
## API
### IndexedList Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|options|Object |-|索引列表需要的数据对象|
|showSelect |Boolean|-| 展示模式，true 为展示默认，false 为选择模式，默认为 false |
**options 数据格式说明**
```json
[{
"letter": "A",
"data": [
"阿克苏机场",
"阿拉山口机场",
"阿勒泰机场",
"阿里昆莎机场",
"安庆天柱山机场",
"澳门国际机场"
]
}, {
"letter": "B",
"data": [
"保山机场",
"包头机场",
"北海福成机场",
"北京南苑机场",
"北京首都国际机场"
]
}]
```
### IndexedList Events
|事件名 |说明|返回值|
|:-:|:-:|:-:|
|click |点击列表事件 ，返回当前选择项的事件对象|-|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list
> Template
``` html
<template>
# uni-indexed-list 索引列表
::: tip 组件名：uni-indexed-list
> 代码块： `uIndexedList`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)
:::
用于展示索引列表。
## 介绍
### 基本用法
```html
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
```
## API
### IndexedList Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|options|Object |-|索引列表需要的数据对象|
|showSelect |Boolean|-| 展示模式，true 为展示默认，false 为选择模式，默认为 false |
**options 数据格式说明**
```json
[{
"letter": "A",
"data": [
"阿克苏机场",
"阿拉山口机场",
"阿勒泰机场",
"阿里昆莎机场",
"安庆天柱山机场",
"澳门国际机场"
]
}, {
"letter": "B",
"data": [
"保山机场",
"包头机场",
"北海福成机场",
"北京南苑机场",
"北京首都国际机场"
]
}]
```
### IndexedList Events
|事件名 |说明|返回值|
|:-:|:-:|:-:|
|click |点击列表事件 ，返回当前选择项的事件对象|-|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list
> Template
``` html
<template>
<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
</template>
```
> Script
```
> Script
``` html
<script>
import airport from '@/common/airport.js'
......@@ -87,11 +89,11 @@
}
}
</script>
```
> airport.js
```js
```
> airport.js
```js
export default {
'list': [{
'letter': 'A',
......@@ -353,8 +355,8 @@ export default {
'珠海三灶机场'
]
}]
}
```
:::
}
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list)
\ No newline at end of file
docs/component/uniui/uni-link.md
浏览文件 @ 74cd0550
# uni-link 超链接
::: tip 组件名：uni-link
> 代码块： `uLink`
......@@ -47,31 +49,31 @@ uni-link是一个外部网页超链接组件，在小程序内复制url，在app
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/link/link
> Template
``` html
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</text>
</uni-card>
<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
</uni-section>
<uni-section title="自定义颜色" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
</uni-section>
<uni-section title="自定义下划线" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false">
</uni-link>
</uni-section>
<uni-section title="自定义字体大小" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
font-size="20"></uni-link>
</uni-section>
<uni-section title="自定义插槽" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
color="red">点击跳转</uni-link>
</uni-section>
</view>
</template>
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</text>
</uni-card>
<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
</uni-section>
<uni-section title="自定义颜色" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
</uni-section>
<uni-section title="自定义下划线" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false">
</uni-link>
</uni-section>
<uni-section title="自定义字体大小" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
font-size="20"></uni-link>
</uni-section>
<uni-section title="自定义插槽" type="line" padding>
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
color="red">点击跳转</uni-link>
</uni-section>
</view>
</template>
```
:::
......
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`
......@@ -81,68 +82,68 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar
> Template
``` html
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。</text>
</uni-card>
<uni-section title="多行显示" type="line">
<uni-notice-bar text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="单行显示" subTitle="使用 single 属性单行显示通知" type="line">
<uni-notice-bar single text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="显示图标" subTitle="使用 show-icon 属性显示左侧小喇叭图标" type="line">
<uni-notice-bar show-icon text="uni-app发布，开发一次、7端覆盖！" />
</uni-section>
<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
<uni-notice-bar show-icon scrollable
text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="查看更多" subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
type="line">
<uni-notice-bar show-get-more show-icon text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
<uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
@getmore="getMore" />
</uni-section>
<uni-section title="修改颜色" type="line">
<uni-notice-bar single color="#2979FF" background-color="#EAF2FF"
text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="关闭按钮" subTitle="使用 show-close 属性,可关闭通知" type="line">
<uni-notice-bar show-close single text="HBuilderX 1.0正式发布！uni-app实现里程碑突破实现里程碑突破！" />
</uni-section>
</view>
</template>
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。</text>
</uni-card>
<uni-section title="多行显示" type="line">
<uni-notice-bar text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="单行显示" subTitle="使用 single 属性单行显示通知" type="line">
<uni-notice-bar single text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="显示图标" subTitle="使用 show-icon 属性显示左侧小喇叭图标" type="line">
<uni-notice-bar show-icon text="uni-app发布，开发一次、7端覆盖！" />
</uni-section>
<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
<uni-notice-bar show-icon scrollable
text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="查看更多" subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
type="line">
<uni-notice-bar show-get-more show-icon text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
<uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
@getmore="getMore" />
</uni-section>
<uni-section title="修改颜色" type="line">
<uni-notice-bar single color="#2979FF" background-color="#EAF2FF"
text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="关闭按钮" subTitle="使用 show-close 属性,可关闭通知" type="line">
<uni-notice-bar show-close single text="HBuilderX 1.0正式发布！uni-app实现里程碑突破实现里程碑突破！" />
</uni-section>
</view>
</template>
```
> Script
```html
<script>
export default {
methods: {
getMore() {
uni.showToast({
title: '点击查看更多',
icon: 'none'
})
}
}
}
</script>
```html
<script>
export default {
methods: {
getMore() {
uni.showToast({
title: '点击查看更多',
icon: 'none'
})
}
}
}
</script>
```
> Style
```html
<style lang="scss">
.container {
/* #ifndef APP-NVUE */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* #endif */
}
```html
<style lang="scss">
.container {
/* #ifndef APP-NVUE */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* #endif */
}
</style>
```
......
docs/component/uniui/uni-number-box.md
浏览文件 @ 74cd0550
# uni-number-box 数字输入框
::: tip 组件名：uni-number-box
> 代码块： `uNumberBox`
......
docs/component/uniui/uni-pagination.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-pagination
> 代码块： `uPagination`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-pagination)
:::
分页器组件，用于展示页码、请求数据等。
## 介绍
### 基本用法
```html
<uni-pagination title="标题文字" total="20"></uni-pagination>
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
```
## API
### Pagination Props
|属性名|类型 |默认值 |说明|
|:-:|:-:|:-:|:-:|
|prevText|String|上一页|左侧按钮文字|
|nextText|String|下一页|右侧按钮文字|
|value/v-model|Number|1|当前页|
|current|Number |1|当前页, 优先级高于 value|
|total|Number|0|数据总量|
|pageSize|Number|10|每页数据量|
|showIcon|Boolean|false |是否以 icon 形式展示按钮 |
### Pagination Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|点击页码按钮时触发 |e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-pagination) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination
> Template
``` html
# uni-pagination 分页器
::: tip 组件名：uni-pagination
> 代码块： `uPagination`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-pagination)
:::
分页器组件，用于展示页码、请求数据等。
## 介绍
### 基本用法
```html
<uni-pagination title="标题文字" total="20"></uni-pagination>
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
```
## API
### Pagination Props
|属性名|类型 |默认值 |说明|
|:-:|:-:|:-:|:-:|
|prevText|String|上一页|左侧按钮文字|
|nextText|String|下一页|右侧按钮文字|
|value/v-model|Number|1|当前页|
|current|Number |1|当前页, 优先级高于 value|
|total|Number|0|数据总量|
|pageSize|Number|10|每页数据量|
|showIcon|Boolean|false |是否以 icon 形式展示按钮 |
### Pagination Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|点击页码按钮时触发 |e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-pagination) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination
> Template
``` html
<template>
<view>
<uni-card is-full :is-shadow="false">
......@@ -78,8 +79,8 @@
</uni-section>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -111,8 +112,8 @@
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.example-body {
......@@ -146,9 +147,9 @@
font-size: 14px;
color: #333;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination)
\ No newline at end of file
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`
......@@ -105,69 +106,69 @@ export default {
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate
> Template
``` html
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
</uni-card>
<uni-section title="基本用法" type="line" padding>
<uni-rate v-model="rateValue" @change="onChange" />
</uni-section>
<uni-section title="不支持滑动手势选择评分" subTitle="设置 touchable 属性控制是否开启手势选择" type="line" padding>
<uni-rate :touchable="false" :value="5" @change="onChange" />
</uni-section>
<uni-section title="设置尺寸大小" subTitle="设置 size 属性控制组件大小" type="line" padding>
<uni-rate size="18" :value="5" />
</uni-section>
<uni-section title="设置评分数" subTitle="设置 max 属性控制组件最大星星数量" type="line" padding>
<uni-rate :max="10" :value="5" />
</uni-section>
<uni-section title="设置星星间隔" subTitle="设置 margin 属性控制星星间隔" type="line" padding>
<uni-rate :value="4" margin="20" />
</uni-section>
<uni-section title="设置颜色" subTitle="使用 color 属性设置星星颜色" type="line" padding>
<uni-rate :value="3" color="#bbb" active-color="red" />
</uni-section>
<uni-section title="半星" subTitle="使用 allow-half 属性设置是否显示半星" type="line" padding>
<uni-rate allow-half :value="3.5" />
</uni-section>
<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
<uni-rate :readonly="true" :value="2" />
</uni-section>
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
</uni-section>
<uni-section title="未选中的星星为镂空状态" subTitle="使用 is-fill 属性设置星星镂空" type="line" padding>
<uni-rate :value="3" :is-fill="false" />
</uni-section>
</view>
</template>
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
</uni-card>
<uni-section title="基本用法" type="line" padding>
<uni-rate v-model="rateValue" @change="onChange" />
</uni-section>
<uni-section title="不支持滑动手势选择评分" subTitle="设置 touchable 属性控制是否开启手势选择" type="line" padding>
<uni-rate :touchable="false" :value="5" @change="onChange" />
</uni-section>
<uni-section title="设置尺寸大小" subTitle="设置 size 属性控制组件大小" type="line" padding>
<uni-rate size="18" :value="5" />
</uni-section>
<uni-section title="设置评分数" subTitle="设置 max 属性控制组件最大星星数量" type="line" padding>
<uni-rate :max="10" :value="5" />
</uni-section>
<uni-section title="设置星星间隔" subTitle="设置 margin 属性控制星星间隔" type="line" padding>
<uni-rate :value="4" margin="20" />
</uni-section>
<uni-section title="设置颜色" subTitle="使用 color 属性设置星星颜色" type="line" padding>
<uni-rate :value="3" color="#bbb" active-color="red" />
</uni-section>
<uni-section title="半星" subTitle="使用 allow-half 属性设置是否显示半星" type="line" padding>
<uni-rate allow-half :value="3.5" />
</uni-section>
<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
<uni-rate :readonly="true" :value="2" />
</uni-section>
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
</uni-section>
<uni-section title="未选中的星星为镂空状态" subTitle="使用 is-fill 属性设置星星镂空" type="line" padding>
<uni-rate :value="3" :is-fill="false" />
</uni-section>
</view>
</template>
```
> Script
``` html
<script>
export default {
components: {},
data() {
return {
rateValue: 0
}
},
onLoad() {
// 模拟动态赋值
setTimeout(() => {
this.rateValue = 3
}, 1000)
},
methods: {
onChange(e) {
console.log('rate发生改变:' + JSON.stringify(e))
// console.log(this.rateValue);
}
}
}
</script>
``` html
<script>
export default {
components: {},
data() {
return {
rateValue: 0
}
},
onLoad() {
// 模拟动态赋值
setTimeout(() => {
this.rateValue = 3
}, 1000)
},
methods: {
onChange(e) {
console.log('rate发生改变:' + JSON.stringify(e))
// console.log(this.rateValue);
}
}
}
</script>
```
:::
......
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
::: tip 组件名：uni-segmented-control
> 代码块： `uSegmentedControl`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)
:::
用作不同视图的显示
## 介绍
### 基本用法
```html
<template>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
<view class="content">
<view v-show="current === 0">
选项卡1的内容
</view>
<view v-show="current === 1">
选项卡2的内容
</view>
<view v-show="current === 2">
选项卡3的内容
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
...
items: ['选项1', '选项2', '选项3'],
current: 0
};
},
methods: {
...
onClickItem(e) {
if (this.current != e.currentIndex) {
this.current = e.currentIndex;
}
}
}
};
</script>
```
## API
### SegmentedControl Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|current|Number|0|当前选中的tab索引值，从0计数|
|styleType|String|button|分段器样式类型，可选值：button（按钮类型），text（文字类型） |
|activeColor|String|#007aff|选中的标签背景色与边框颜色|
|values|Array|-|选项数组|
### SegmentedControl Events
|事件名|说明|返回值|
|:-:|:-:|:-:|
|@clickItem |组件触发点击事件时触发|e={currentIndex} |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control
> Template
``` html
# uni-segmented-control 分段器
::: tip 组件名：uni-segmented-control
> 代码块： `uSegmentedControl`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)
:::
用作不同视图的显示
## 介绍
### 基本用法
```html
<template>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
<view class="content">
<view v-show="current === 0">
选项卡1的内容
</view>
<view v-show="current === 1">
选项卡2的内容
</view>
<view v-show="current === 2">
选项卡3的内容
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
...
items: ['选项1', '选项2', '选项3'],
current: 0
};
},
methods: {
...
onClickItem(e) {
if (this.current != e.currentIndex) {
this.current = e.currentIndex;
}
}
}
};
</script>
```
## API
### SegmentedControl Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|current|Number|0|当前选中的tab索引值，从0计数|
|styleType|String|button|分段器样式类型，可选值：button（按钮类型），text（文字类型） |
|activeColor|String|#007aff|选中的标签背景色与边框颜色|
|values|Array|-|选项数组|
### SegmentedControl Events
|事件名|说明|返回值|
|:-:|:-:|:-:|
|@clickItem |组件触发点击事件时触发|e={currentIndex} |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control
> Template
``` html
<template>
<view>
<uni-card is-full>
......@@ -127,8 +128,8 @@ export default {
</view>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -173,9 +174,9 @@ export default {
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.example-body {
......@@ -249,8 +250,8 @@ export default {
.uni-list-item__content-title {
font-size: 14px;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control)
\ No newline at end of file
docs/component/uniui/uni-steps.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-steps
> 代码块： `uSteps`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-steps)
:::
步骤条，常用于显示进度
## 介绍
### 基本用法
```html
<!-- 基本用法 -->
<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
<!-- 纵向排列 -->
<uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>
```
## API
### Steps Props
|属性名|类型| 可选值|默认值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|active|Number|-|0|当前步骤|
|**direction** |String |row/column |row|排列方向|
|active-color|String|-|#1aad19|选中状态的颜色|
|options|Array|-| -|数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]|
#### Direction Options
| 属性名| 说明|
| :-:| :-:|
| row| 横向|
| column| 纵向|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-steps) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/steps/steps
> Template
``` html
# uni-steps 步骤条
::: tip 组件名：uni-steps
> 代码块： `uSteps`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-steps)
:::
步骤条，常用于显示进度
## 介绍
### 基本用法
```html
<!-- 基本用法 -->
<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
<!-- 纵向排列 -->
<uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>
```
## API
### Steps Props
|属性名|类型| 可选值|默认值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|active|Number|-|0|当前步骤|
|**direction** |String |row/column |row|排列方向|
|active-color|String|-|#1aad19|选中状态的颜色|
|options|Array|-| -|数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]|
#### Direction Options
| 属性名| 说明|
| :-:| :-:|
| row| 横向|
| column| 纵向|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-steps) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/steps/steps
> Template
``` html
<template>
<view>
<uni-section title="基本用法" type="line" padding>
......@@ -65,8 +66,8 @@
<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">改变状态</button>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -109,9 +110,9 @@
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.status-btn {
......@@ -133,9 +134,9 @@
padding: 15px;
flex-direction: row;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/steps/steps)
\ No newline at end of file
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
::: tip 组件名：uni-tag
> 代码块： `uTag`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-tag)
:::
用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
## 介绍
### 基本用法
在 ``template`` 中使用组件
```html
<uni-tag text="标签"></uni-tag>
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
<uni-tag text="标签" @click="bindClick"></uni-tag>
```
## API
### Tag Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |标签内容 |
|size |String |normal |大小尺寸，可选值：normal、small |
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)、royal(紫色) |
|disabled |Boolean|false |是否为禁用状态 |
|inverted |Boolean|false |是否无需背景颜色（空心标签） |
|circle |Boolean|false |是否为圆角 |
### Tag Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |点击 Tag 触发事件 |- |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-tag) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag
> Template
``` html
# uni-tag 标签
::: tip 组件名：uni-tag
> 代码块： `uTag`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-tag)
:::
用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
## 介绍
### 基本用法
在 ``template`` 中使用组件
```html
<uni-tag text="标签"></uni-tag>
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
<uni-tag text="标签" @click="bindClick"></uni-tag>
```
## API
### Tag Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |标签内容 |
|size |String |normal |大小尺寸，可选值：normal、small |
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)、royal(紫色) |
|disabled |Boolean|false |是否为禁用状态 |
|inverted |Boolean|false |是否无需背景颜色（空心标签） |
|circle |Boolean|false |是否为圆角 |
### Tag Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |点击 Tag 触发事件 |- |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-tag) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag
> Template
``` html
<template>
<view class="container">
<uni-card is-full>
......@@ -166,9 +167,9 @@
</uni-section>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -193,8 +194,8 @@
},
};
</script>
```
:::
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag)
\ No newline at end of file
docs/component/uniui/uni-title.md
浏览文件 @ 74cd0550
::: tip 组件名：uni-title
> 代码块： `uTitle`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-title)
:::
章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。
## 介绍
### 基本用法
```html
<uni-title title="上报统计数据"></uni-title>
<uni-title type="h1" title="h1 一级标题 "></uni-title>
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
```
### 标题统计
title 组件可以与 uni统计集合使用，只要开启uni统计，即可自动采集标题
- 如果不写 type 属性， 为上报标题。这是标题统计的默认用法，页面会优先上报组件传入的title值为统计上报数据
- 页面统计上报只会上报一次，如多个组件开启，则只上报最后一个组件的内容，所以如非必要请不要多个组件同时开启统计，避免上报错误标题统计
- 为避免上报错误标题统计， uni.report() API 与章节标题组件请勿一起使用
::: warning 注意事项
- 在使用 align 属性时，在非 nvue 页面下不生效，或者组件宽度不对，请在组件外层设置一个元素的 display为block 即可解决问题。
**示例：**
```html
<template>
<view class="box">
<uni-title type="h1" title="h1 一级标题 "></uni-title>
</view>
</template>
<style>
.box {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
</style>
```
:::
## API
### Title Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|type |String |- |标题类型，可选值 h1、h2、h3、h4、h5 ，章节标题字体会比正常字长字体粗，不指定 type 值，默认为上报统计数据 |
|title |String |- |章节标题内容 |
|align |String |- |对齐方式，可选值 left:左对齐；center:居中；right:右对齐； |
|color |String |- |字体颜色 |
|stat |Boolean|- |是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭 |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-title) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/title/title
> Template
``` html
# uni-title 标题
::: tip 组件名：uni-title
> 代码块： `uTitle`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-title)
:::
章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。
## 介绍
### 基本用法
```html
<uni-title title="上报统计数据"></uni-title>
<uni-title type="h1" title="h1 一级标题 "></uni-title>
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
```
### 标题统计
title 组件可以与 uni统计集合使用，只要开启uni统计，即可自动采集标题
- 如果不写 type 属性， 为上报标题。这是标题统计的默认用法，页面会优先上报组件传入的title值为统计上报数据
- 页面统计上报只会上报一次，如多个组件开启，则只上报最后一个组件的内容，所以如非必要请不要多个组件同时开启统计，避免上报错误标题统计
- 为避免上报错误标题统计， uni.report() API 与章节标题组件请勿一起使用
::: warning 注意事项
- 在使用 align 属性时，在非 nvue 页面下不生效，或者组件宽度不对，请在组件外层设置一个元素的 display为block 即可解决问题。
**示例：**
```html
<template>
<view class="box">
<uni-title type="h1" title="h1 一级标题 "></uni-title>
</view>
</template>
<style>
.box {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
</style>
```
:::
## API
### Title Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|type |String |- |标题类型，可选值 h1、h2、h3、h4、h5 ，章节标题字体会比正常字长字体粗，不指定 type 值，默认为上报统计数据 |
|title |String |- |章节标题内容 |
|align |String |- |对齐方式，可选值 left:左对齐；center:居中；right:右对齐； |
|color |String |- |字体颜色 |
|stat |Boolean|- |是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭 |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-title) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/title/title
> Template
``` html
<template>
<view class="uni-content">
<uni-card is-full :is-shadow="false">
......@@ -134,8 +135,8 @@ title 组件可以与 uni统计集合使用，只要开启uni统计，即可自
</uni-section>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -147,8 +148,8 @@ title 组件可以与 uni统计集合使用，只要开启uni统计，即可自
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.example-body {
......@@ -163,9 +164,9 @@ title 组件可以与 uni统计集合使用，只要开启uni统计，即可自
line-height: 22px;
color: #333;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/title/title)
\ No newline at end of file
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,12 +19,12 @@
|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模板，可快速体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/view/view
::: preview https://hellouniapp.dcloud.net.cn/pages/component/view/view
```html
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
......@@ -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.
先完成此消息的编辑！
想要评论请 注册 或