diff --git a/docs/component/README.md b/docs/component/README.md
index 0b34d8d61321f50549e95fae94d0d1a14cf33e7d..b0cc06425b62d070a1006f41d0bd17732fb28df3 100644
--- a/docs/component/README.md
+++ b/docs/component/README.md
@@ -1,4 +1,4 @@
-### 组件使用的入门教程
+## 组件使用的入门教程
 - 组件是视图层的基本组成单元。
 - 组件是一个单独且可复用的功能模块的封装。
 
diff --git a/docs/component/button.md b/docs/component/button.md
index 6f7dda2d375c79bd37e0357fc59913cf81668efe..ae33ddf8165308629a53cfeba3e1a62b48a60ae9 100644
--- a/docs/component/button.md
+++ b/docs/component/button.md
@@ -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语法，比如下面的获取手机号示例
 
diff --git a/docs/component/camera.md b/docs/component/camera.md
index 6c6eb7d2973ebd5d70fd915e0eefd633b00db1b6..bd8af691c6fca1ed50ce3587236f2dd2502c825e 100644
--- a/docs/component/camera.md
+++ b/docs/component/camera.md
@@ -1,7 +1,7 @@
-#### 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>
diff --git a/docs/component/canvas.md b/docs/component/canvas.md
index be00a2cc3688b6cea118f9b043c79b163956c322..397d357e8d3abde13b910fbbc3ba2af52dd9de51 100644
--- a/docs/component/canvas.md
+++ b/docs/component/canvas.md
@@ -1,8 +1,8 @@
-#### 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/)
 
diff --git a/docs/component/cell.md b/docs/component/cell.md
index 0858351eb87649cb6fd5732f3499eaf791e2357e..1664fa8599bfde13ee9b35188ce4dfcad2d9b4a1 100644
--- a/docs/component/cell.md
+++ b/docs/component/cell.md
@@ -1,4 +1,4 @@
-#### cell
+## cell
 
 app端nvue专用组件。它的重要价值在于告诉原生引擎，哪些部分是可重用的。
 
diff --git a/docs/component/checkbox.md b/docs/component/checkbox.md
index f256cbe7caaccf5c3939d8855640a4312ac5790d..b48037dcb7ecbcbb76e1f325105d548aa0a9cf4f 100644
--- a/docs/component/checkbox.md
+++ b/docs/component/checkbox.md
@@ -1,16 +1,16 @@
-#### 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)
diff --git a/docs/component/component-selection.md b/docs/component/component-selection.md
index 4eb5fd117c0a90c0606dcd143f579c6953c7a87d..9c597ec1b1ac1dc989f0f45696ff28e01441e9d4 100644
--- a/docs/component/component-selection.md
+++ b/docs/component/component-selection.md
@@ -1,4 +1,4 @@
-### 组件的概念
+## 组件的概念
 组件是现代开发的重要里程碑。组件重构了分工模型，让大量的轮子出现，让开发者可以拿来轮子直接用，大幅提升了整个产业的效率。
 
 uni-app是有[内置组件](https://uniapp.dcloud.io/component/README)的。这和web开发不一样。
diff --git a/docs/component/cover-image.md b/docs/component/cover-image.md
index e9f3b79bbbc6130969e30dd7c94416e7537db037..6c404104296835fda24f3070b6a2955f1ce0b18d 100644
--- a/docs/component/cover-image.md
+++ b/docs/component/cover-image.md
@@ -1,13 +1,13 @@
-### 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模板，可直接体验完整示例。
 
diff --git a/docs/component/cover-view.md b/docs/component/cover-view.md
index ac60b8f0cc780c6404e4a667630e023ee1fccb39..e7bdcf18d5638eaf145c4db7bc4935f9bf89ae1d 100644
--- a/docs/component/cover-view.md
+++ b/docs/component/cover-view.md
@@ -1,10 +1,10 @@
-### 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` 动画。
diff --git a/docs/component/custom-tab-bar.md b/docs/component/custom-tab-bar.md
index 131c5f9bd0bb0b7aac8eb16fa0eafd3cf7eff14a..1d2840c2994b0a5865a7f5727ef3766555764eb5 100644
--- a/docs/component/custom-tab-bar.md
+++ b/docs/component/custom-tab-bar.md
@@ -1,4 +1,4 @@
-#### 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组件，将页面一级导航放置在网页顶部。
 
diff --git a/docs/component/datacom.md b/docs/component/datacom.md
index 07e01d2e89d3fadf69c3d734a53eb4dd0b78b239..3e110a64915db5a1351f4aa71391b3aa0f87e325 100644
--- a/docs/component/datacom.md
+++ b/docs/component/datacom.md
@@ -1,4 +1,4 @@
-### 什么是datacom
+## 什么是datacom
 
 `datacom`，全称是`data components`，数据驱动的组件。
 
diff --git a/docs/component/form.md b/docs/component/form.md
index e2cd53bfc018bb2a5380178baddc3809d89dbf56..4c4fa8c42d0bef0fbdeb02b912ff0b7b0d931036 100644
--- a/docs/component/form.md
+++ b/docs/component/form.md
@@ -1,9 +1,9 @@
-#### 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 -->
diff --git a/docs/component/icon.md b/docs/component/icon.md
index 4079acf82d073112d9652720254dbf92c3f218c6..d9456bdaeb716ef86f238d786d7bb68fba212ccd 100644
--- a/docs/component/icon.md
+++ b/docs/component/icon.md
@@ -1,18 +1,18 @@
-#### 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"/>
diff --git a/docs/component/image.md b/docs/component/image.md
index da4c801d790b37639ca41db6f8bf2db2935edf6d..9167c34dda2449113822e03564bd4fa29247dbbd 100644
--- a/docs/component/image.md
+++ b/docs/component/image.md
@@ -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 码；
diff --git a/docs/component/input.md b/docs/component/input.md
index 48cdcc0de60d8e198e96d8649854314d092e6367..bd0a4e6b5836556e54449d3cf4428354f5f18cd2 100644
--- a/docs/component/input.md
+++ b/docs/component/input.md
@@ -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)
diff --git a/docs/component/label.md b/docs/component/label.md
index 7c51950307de6e4b85da50df0bcccc80ab67def3..c1e71884af7f589aaab1431affb92dded25bf032 100644
--- a/docs/component/label.md
+++ b/docs/component/label.md
@@ -1,4 +1,4 @@
-#### 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模板，可直接体验完整示例。
 
diff --git a/docs/component/list.md b/docs/component/list.md
index aa61eb91c6b462b0bb9bc239e6e9c16eaacd8586..66a4ee0e28fc4b505ac4796bae819c2855c0310f 100644
--- a/docs/component/list.md
+++ b/docs/component/list.md
@@ -1,4 +1,4 @@
-#### 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导航栏透明。
diff --git a/docs/component/live-player.md b/docs/component/live-player.md
index 76ab99d9358a247656261e53098604f6bf8217fb..ae3c8dab5de59401390e85cbd529f376125b0d24 100644
--- a/docs/component/live-player.md
+++ b/docs/component/live-player.md
@@ -1,10 +1,10 @@
-#### 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
diff --git a/docs/component/live-pusher.md b/docs/component/live-pusher.md
index 4e526c301b5bf44330a73e3fdff91bd4b1d45522..71914417c22054f5e7fe6276e26f69a0e9b6e41e 100644
--- a/docs/component/live-pusher.md
+++ b/docs/component/live-pusher.md
@@ -1,8 +1,8 @@
-#### live-pusher
+## live-pusher
 
 实时音视频录制，也称直播推流。
 
-**平台差异说明**
+#### 平台差异说明
 
 |App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
 |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
diff --git a/docs/component/map.md b/docs/component/map.md
index bc371e94d58835609648810e0cc736adf2f52133..1d7b370ff534479e9aecfdb7c96658a160d47346 100644
--- a/docs/component/map.md
+++ b/docs/component/map.md
@@ -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
diff --git a/docs/component/match-media.md b/docs/component/match-media.md
index 06c7676ef37970a3cb750c2f16e59df1c732666a..75b3602ec92e4bc51295dbf6f29ae7a81b89fb1f 100644
--- a/docs/component/match-media.md
+++ b/docs/component/match-media.md
@@ -1,4 +1,4 @@
-### 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
diff --git a/docs/component/movable-area.md b/docs/component/movable-area.md
index 343948fdaae506c3b472f1fd63ea52eb2d74ab32..c6fd65f85c1e820cb16dba7995938de158b10752 100644
--- a/docs/component/movable-area.md
+++ b/docs/component/movable-area.md
@@ -1,4 +1,4 @@
-### movable-area
+## movable-area
 
 可拖动区域
 
@@ -12,13 +12,13 @@
 
 `movable-view`的规范另见[movable-view](/component/movable-view.md)。
 
-**平台差异说明**
+#### 平台差异说明
 
 |App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
 |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
 |√|√|√|√|√|√|x|√|√|√|√|√|
 
-**属性说明**
+#### 属性说明
 
 |属性名|类型|默认值|说明|
 |:-|:-|:-|:-|
diff --git a/docs/component/movable-view.md b/docs/component/movable-view.md
index 04167fb344c25267228cacdadb4215727f580b7c..2798ec8fc63cbd90b8589361dd396017336cdb20 100644
--- a/docs/component/movable-view.md
+++ b/docs/component/movable-view.md
@@ -1,16 +1,16 @@
-### 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模板，可快速体验完整示例。
 
diff --git a/docs/component/native-component.md b/docs/component/native-component.md
index 955e74701f042338d95c79ef769bb78f888140ac..56c1e3b4a03ae9d0ab37d18f77301565e444634e 100644
--- a/docs/component/native-component.md
+++ b/docs/component/native-component.md
@@ -1,4 +1,4 @@
-#### 原生组件说明
+## 原生组件说明
 
 小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
 
diff --git a/docs/component/navigation-bar.md b/docs/component/navigation-bar.md
index 8fe4bb12e0c381ce60aee506b5e67760d6cea0a2..760264dfc875b1356a91ced4909828acc2a89dc1 100644
--- a/docs/component/navigation-bar.md
+++ b/docs/component/navigation-bar.md
@@ -1,8 +1,8 @@
-#### 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`，但编译到微信时，受微信基础库版本限制；编译到其他平台不受平台版本限制。
 
-**属性说明**
+#### 属性说明
 
 |属性|类型|默认值|必填|说明|最低版本
 |:-|:-|:-|:-|:-|:-|
diff --git a/docs/component/navigator.md b/docs/component/navigator.md
index 424525ba43185f501a284f32a31a55283e79170f..9faea2c72c125cce46a05f394e3139609a356347 100644
--- a/docs/component/navigator.md
+++ b/docs/component/navigator.md
@@ -1,4 +1,4 @@
-#### 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
diff --git a/docs/component/official-account.md b/docs/component/official-account.md
index f75c8ccb3d4f7bcdd5520261404b6e337848fcdc..59e40977766036383192da7760e9563a60c57fec 100644
--- a/docs/component/official-account.md
+++ b/docs/component/official-account.md
@@ -1,4 +1,4 @@
-#### official-account
+## official-account
 
 微信公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。
 
diff --git a/docs/component/open-data.md b/docs/component/open-data.md
index 865f111a9979400866f24a0bb00d168859f5bc5e..1135f513eb6eee5d68b240b26d4bb95fc74d61eb 100644
--- a/docs/component/open-data.md
+++ b/docs/component/open-data.md
@@ -1,20 +1,20 @@
-#### 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>
diff --git a/docs/component/page-meta.md b/docs/component/page-meta.md
index 340fb77cf424276eb2426e4cc073c819f26cc808..4016183d247907f89c0227458cc3a5d72a571dc7 100644
--- a/docs/component/page-meta.md
+++ b/docs/component/page-meta.md
@@ -1,4 +1,4 @@
-#### 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`，但编译到微信时，受微信基础库版本限制；编译到其他平台不受平台版本限制。
 
-**属性说明**
+#### 属性说明
 
 |属性|类型|默认值|必填|说明|版本要求/平台差异说明|
 |:-|:-|:-|:-|:-|:-|
diff --git a/docs/component/picker-view.md b/docs/component/picker-view.md
index 79b8b2cc546532f91abde26d2180a9328b450c37..101e6c000715e0d1f3b36ee0d23d5363796accd9 100644
--- a/docs/component/picker-view.md
+++ b/docs/component/picker-view.md
@@ -1,10 +1,10 @@
-#### 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)
 
diff --git a/docs/component/picker.md b/docs/component/picker.md
index caf488c22b7e0e4caf357a8320d0beb2e02f3287..1d6ac8af8a14a18f232fd170cd04759ea235f9de 100644
--- a/docs/component/picker.md
+++ b/docs/component/picker.md
@@ -1,12 +1,12 @@
-#### 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，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此
 
 **扩展**
diff --git a/docs/component/progress.md b/docs/component/progress.md
index f150188ffd0724cbc4b534177d89fb59c75715f8..02153ec59ff7f532c1bba3ca829e5042e697f5cf 100644
--- a/docs/component/progress.md
+++ b/docs/component/progress.md
@@ -1,7 +1,7 @@
-#### 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项目中查看 -->
diff --git a/docs/component/radio.md b/docs/component/radio.md
index 900b2e15c3347e3e98b9792410fed13c484a971e..fada9566df94edea078e775daf98aeaaafa19915 100644
--- a/docs/component/radio.md
+++ b/docs/component/radio.md
@@ -1,8 +1,8 @@
-#### 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模板，可直接体验完整示例。
 
diff --git a/docs/component/recycle-list.md b/docs/component/recycle-list.md
index 8472e9f1ab8c7c3724d26d147be4aba4372fe88d..035471a6c0bf8b6f830c1d98edd7a79bde0da437 100644
--- a/docs/component/recycle-list.md
+++ b/docs/component/recycle-list.md
@@ -1,4 +1,4 @@
-#### 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 指令类似，但是它循环的是自己内部的子节点，并不是当前节点。写法：
diff --git a/docs/component/refresh.md b/docs/component/refresh.md
index c38ed946963175395cbaf7ce47cc72f307c512fe..a5719d2ca8310f359ce6e9db74f681db1c723488 100644
--- a/docs/component/refresh.md
+++ b/docs/component/refresh.md
@@ -1,4 +1,4 @@
-#### refresh
+## refresh
 
 app端nvue专用组件。
 
diff --git a/docs/component/rich-text.md b/docs/component/rich-text.md
index 53d7a7066ff65df7606a912c980cd50160fa5b43..bf224bb7e35546e71e64e804e94aaca2f124549e 100644
--- a/docs/component/rich-text.md
+++ b/docs/component/rich-text.md
@@ -1,10 +1,10 @@
-#### 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组件支持链接图片点击。
diff --git a/docs/component/scroll-view.md b/docs/component/scroll-view.md
index 87f9c7cdc4e283dc0aa17ef548be326d6c040a85..ebf95c4205f8e06a5fd79e523e4d4c90a40d29f6 100644
--- a/docs/component/scroll-view.md
+++ b/docs/component/scroll-view.md
@@ -1,4 +1,4 @@
-# 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中配置的原生下拉刷新。
 
diff --git a/docs/component/slider.md b/docs/component/slider.md
index 04faf501e9e87cbffa46ad7e80a9817a706b9fdc..94b9d00d959af92ef724eb8119c636c6f104fa54 100644
--- a/docs/component/slider.md
+++ b/docs/component/slider.md
@@ -1,8 +1,8 @@
-#### 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)
diff --git a/docs/component/swiper.md b/docs/component/swiper.md
index 2da7a189d725e06e030eb5063dcd1635914e2bcf..359c2d4bfef97bb56844e0febc47f26d36908811 100644
--- a/docs/component/swiper.md
+++ b/docs/component/swiper.md
@@ -1,4 +1,4 @@
-### 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模板，可直接体验完整示例。
 
diff --git a/docs/component/switch.md b/docs/component/switch.md
index 6435a1847547e1db7c32b01bac21e02277ed50e8..1e752099456cd8e4bcc29167dea21bbe335e6a9c 100644
--- a/docs/component/switch.md
+++ b/docs/component/switch.md
@@ -1,8 +1,8 @@
-#### 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
diff --git a/docs/component/text.md b/docs/component/text.md
index 7b7c538e31d9ec784a1aad7430639e3f3f38a1e8..7e1b2a2ff3130973dc57d5c84a12073512ba01e1 100644
--- a/docs/component/text.md
+++ b/docs/component/text.md
@@ -1,4 +1,4 @@
-# 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)
 
diff --git a/docs/component/textarea.md b/docs/component/textarea.md
index cdebdc89c1affd4777efcccca4c3559492e04dc0..9eb108e6da3ea119b6b956dd3eaaefbd09c85eaa 100644
--- a/docs/component/textarea.md
+++ b/docs/component/textarea.md
@@ -1,8 +1,8 @@
-#### 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)
diff --git a/docs/component/uniui/color.md b/docs/component/uniui/color.md
index e125bd8503d4bcbde8f0c1dfa37650c197c2da2c..5c0b05b27de3be9247d79cfcdaefb1761f5ec3db 100644
--- a/docs/component/uniui/color.md
+++ b/docs/component/uniui/color.md
@@ -1,8 +1,9 @@
-`uni-ui`为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
+# color 颜色
 
-### 主色
+## 主色
 `uni-ui`的主色使用了令人安静并放松的蓝色。
 
+`uni-ui`为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
 
 <div class="color-main">
 	<div class="color-main-top" style="background-color:#2979ff;">
diff --git a/docs/component/uniui/quickstart.md b/docs/component/uniui/quickstart.md
index 9db7f77661d83903a603720fa22ead2843461ff2..63dd2dfc4ac81ca1f425294b8be6c448c872d216 100644
--- a/docs/component/uniui/quickstart.md
+++ b/docs/component/uniui/quickstart.md
@@ -1,7 +1,9 @@
-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
diff --git a/docs/component/uniui/resource.md b/docs/component/uniui/resource.md
index 06c5a15783e8ee322ed2a4022e1cb24d17130a42..084a870173faa5a0b7171134dcc123a59f7bc1f7 100644
--- a/docs/component/uniui/resource.md
+++ b/docs/component/uniui/resource.md
@@ -1,4 +1,4 @@
-# 设计资源
+## 设计资源
 我们提供uni-ui组件的Sketch设计资源，您可以根据需要进行下载。
 
 Axure资源正在整理和完善中。
diff --git a/docs/component/uniui/uni-badge.md b/docs/component/uniui/uni-badge.md
index 9f31d98111ae715e087b68e39f35c41020263f3c..e871b6b6c405b8884e350aa8450dc63cb90d6935 100644
--- a/docs/component/uniui/uni-badge.md
+++ b/docs/component/uniui/uni-badge.md
@@ -1,64 +1,65 @@
-
-::: 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>
+
+:::
+
diff --git a/docs/component/uniui/uni-breadcrumb.md b/docs/component/uniui/uni-breadcrumb.md
index 6d503f78d4197a451e19c2d341704f468463421e..0d8ad4371d2f1a6acc59dc30da4e8b0468559832 100644
--- a/docs/component/uniui/uni-breadcrumb.md
+++ b/docs/component/uniui/uni-breadcrumb.md
@@ -1,3 +1,5 @@
+## 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` 等多个组件。
diff --git a/docs/component/uniui/uni-calendar.md b/docs/component/uniui/uni-calendar.md
index 59392867b14e81b176af4f69534071c6ed6e9900..abfbd72fda20dabb0c1ce6832aad951088b627be 100644
--- a/docs/component/uniui/uni-calendar.md
+++ b/docs/component/uniui/uni-calendar.md
@@ -1,4 +1,4 @@
-
+# uni-calendar 日历
 
 :::tip 组件名：uni-calendar
 > 代码块： `uCalendar`
diff --git a/docs/component/uniui/uni-card.md b/docs/component/uniui/uni-card.md
index d6b4168051ae174aee94a19018f84f45ebc207c2..f7f4bf17deac31398e3d15606c267689ff742a2b 100644
--- a/docs/component/uniui/uni-card.md
+++ b/docs/component/uniui/uni-card.md
@@ -1,3 +1,4 @@
+# uni-card 卡片
 
 ::: tip 组件名：uni-card
 > 代码块： `uCard`
diff --git a/docs/component/uniui/uni-collapse.md b/docs/component/uniui/uni-collapse.md
index e3a62facee2ef3771666db5d945601f365db123f..51bca4e182a3e31d0c3d60e9430494fd38d1a0d1 100644
--- a/docs/component/uniui/uni-collapse.md
+++ b/docs/component/uniui/uni-collapse.md
@@ -1,4 +1,4 @@
-
+# uni-collapse 折叠面板
 
 ::: tip 组件名：uni-collapse
 > 代码块： `uCollapse`
diff --git a/docs/component/uniui/uni-combox.md b/docs/component/uniui/uni-combox.md
index 5dafcfd1c7b41cd976428d50e7ab084b04d3731a..47f316ed0e6b6ade2f1d6d906e7f0098ae4f8170 100644
--- a/docs/component/uniui/uni-combox.md
+++ b/docs/component/uniui/uni-combox.md
@@ -1,3 +1,4 @@
+# combox 组合框
 
 ::: tip 组件名：uni-combox
 > 代码块： `uCombox`
diff --git a/docs/component/uniui/uni-countdown.md b/docs/component/uniui/uni-countdown.md
index 4834b732cc29b6500f5da513d5f81acc5430693d..ca6e66e4127f8b5a120f7f7373e78a9acbccb82e 100644
--- a/docs/component/uniui/uni-countdown.md
+++ b/docs/component/uniui/uni-countdown.md
@@ -1,4 +1,4 @@
-
+# countdown 倒计时
 
 ::: tip 组件名：uni-countdown
 > 代码块： `uCountDown`
diff --git a/docs/component/uniui/uni-data-checkbox.md b/docs/component/uniui/uni-data-checkbox.md
index 4997c9c3585ae5a546e7256d67c92b88880c97c9..4d6451367e33b1e423cf4716699fcfb0c2f29a81 100644
--- a/docs/component/uniui/uni-data-checkbox.md
+++ b/docs/component/uniui/uni-data-checkbox.md
@@ -1,3 +1,4 @@
+# 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>
 
 ```
diff --git a/docs/component/uniui/uni-data-picker.md b/docs/component/uniui/uni-data-picker.md
index 2a0604e807d2ae7b953277f24c701d75bf6296b6..77fab6a6057a0ba93e22462863c6586b20e1c2f5 100644
--- a/docs/component/uniui/uni-data-picker.md
+++ b/docs/component/uniui/uni-data-picker.md
@@ -1,3 +1,5 @@
+# uni-data-picker 级联选择器
+
 ::: tip 组件名：uni-data-picker
 > 代码块： `uDataPicker`
 > 关联组件：`uni-data-pickerview`、`uni-load-more`。
diff --git a/docs/component/uniui/uni-data-select.md b/docs/component/uniui/uni-data-select.md
index 366275e73291d4b1443ab4da363d3988b7cf3e8c..552700444582601007b470b731516f111ce880bb 100644
--- a/docs/component/uniui/uni-data-select.md
+++ b/docs/component/uniui/uni-data-select.md
@@ -1,3 +1,5 @@
+# uni-data-select 下拉框
+
 ::: tip 组件名：uni-data-select
 
 > 代码块： `uDataSelect`
diff --git a/docs/component/uniui/uni-dateformat.md b/docs/component/uniui/uni-dateformat.md
index 6d6797434d5832f5f81f505eb3f16c04c9942409..1979398d8a51affe5931a381a62d6c9b5158b8a7 100644
--- a/docs/component/uniui/uni-dateformat.md
+++ b/docs/component/uniui/uni-dateformat.md
@@ -1,3 +1,4 @@
+# uni-dateformt 日期格式化
 
 ::: tip 组件名：uni-dateformat
 > 代码块： `uDateformat`
diff --git a/docs/component/uniui/uni-datetime-picker.md b/docs/component/uniui/uni-datetime-picker.md
index 9c4baedfa237d6e11fee3dff7d19e0ac76ac854a..32c011457c4d8043a898b5e63d5041fd99a6ed0c 100644
--- a/docs/component/uniui/uni-datetime-picker.md
+++ b/docs/component/uniui/uni-datetime-picker.md
@@ -1,3 +1,4 @@
+# uni-datetime-picker 日期选择器
 
 ::: danger 重要通知
 组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护
diff --git a/docs/component/uniui/uni-drawer.md b/docs/component/uniui/uni-drawer.md
index 217a2b1bbe56cf94175765b733e5db1e224af97b..66115fff2f6b7afa3ec413c1fd5f8a74d2108a4e 100644
--- a/docs/component/uniui/uni-drawer.md
+++ b/docs/component/uniui/uni-drawer.md
@@ -1,3 +1,4 @@
+# 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>
 
 ```
diff --git a/docs/component/uniui/uni-fab.md b/docs/component/uniui/uni-fab.md
index acef8589a3a596b616fae45c327ab560732589d9..7f90be57829cefad11429439ed0e398b15559ff2 100644
--- a/docs/component/uniui/uni-fab.md
+++ b/docs/component/uniui/uni-fab.md
@@ -1,93 +1,94 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-fav.md b/docs/component/uniui/uni-fav.md
index 85df6dcf8167c76002e15744a732e69d3abefb2b..a4ee1f612490f3f15182494cc9af5434bbaf3668 100644
--- a/docs/component/uniui/uni-fav.md
+++ b/docs/component/uniui/uni-fav.md
@@ -1,53 +1,54 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-file-picker.md b/docs/component/uniui/uni-file-picker.md
index 40cee2eed7f8f9c1128f8abccf378d3a2410d50a..693a45dae50eaee62f7c84b5fea06edd9c01b558 100644
--- a/docs/component/uniui/uni-file-picker.md
+++ b/docs/component/uniui/uni-file-picker.md
@@ -1,3 +1,4 @@
+# uni-file-picker 文件选择上传
 
 ::: tip 组件名：uni-file-picker
 >  代码块： `uFilePicker`
diff --git a/docs/component/uniui/uni-forms.md b/docs/component/uniui/uni-forms.md
index 82142fdb78910e58d729b37ec36a4b975f287138..1c79ae8bf75f9d02464333a859169963b06e085e 100644
--- a/docs/component/uniui/uni-forms.md
+++ b/docs/component/uniui/uni-forms.md
@@ -1,3 +1,5 @@
+# uni-forms 表单
+
 ::: tip 组件名：uni-forms
 > 代码块： `uForms`、`uni-forms-item`
 > 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
diff --git a/docs/component/uniui/uni-goods-nav.md b/docs/component/uniui/uni-goods-nav.md
index 1021db1061c15ad04d9f475d91fc34e319c54404..07c38967f9c82db572c5845014169eab61a9b679 100644
--- a/docs/component/uniui/uni-goods-nav.md
+++ b/docs/component/uniui/uni-goods-nav.md
@@ -1,3 +1,5 @@
+# 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>
 
 ```
diff --git a/docs/component/uniui/uni-grid.md b/docs/component/uniui/uni-grid.md
index aac7e0b742f13be95edf5a73c8322074bde6de4f..2b76fa7d347e02ecb9b26b1e29c71efc3a48ae76 100644
--- a/docs/component/uniui/uni-grid.md
+++ b/docs/component/uniui/uni-grid.md
@@ -1,101 +1,102 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-group.md b/docs/component/uniui/uni-group.md
index c3f0f288aa6d150e410ee8debbf0b599b8abb683..acd14a1ca3b17cb7f63a2a52e8f76b373d94ceed 100644
--- a/docs/component/uniui/uni-group.md
+++ b/docs/component/uniui/uni-group.md
@@ -1,3 +1,5 @@
+# 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>
 ``` 
 :::
 
diff --git a/docs/component/uniui/uni-indexed-list.md b/docs/component/uniui/uni-indexed-list.md
index 4457e704229bae73c3f59608588e85a66eedcd9a..19a430a3038dba96cb3ce2ded7e978c4805ef76f 100644
--- a/docs/component/uniui/uni-indexed-list.md
+++ b/docs/component/uniui/uni-indexed-list.md
@@ -1,75 +1,77 @@
-::: 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
diff --git a/docs/component/uniui/uni-link.md b/docs/component/uniui/uni-link.md
index 8da3f6012006570c18cc0fdbe9f8c84a9cc51739..c8740f8ffea1318697f82c7c4295a60e8f5dc4a4 100644
--- a/docs/component/uniui/uni-link.md
+++ b/docs/component/uniui/uni-link.md
@@ -1,3 +1,5 @@
+# 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>
 
 ```
 :::
diff --git a/docs/component/uniui/uni-list.md b/docs/component/uniui/uni-list.md
index 2ebccc5e598271fb0e50ea6592d76d2ce1539644..a66ab1adda56dcb6f4bee839da073e3bd96ea34a 100644
--- a/docs/component/uniui/uni-list.md
+++ b/docs/component/uniui/uni-list.md
@@ -1,3 +1,5 @@
+# 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>
diff --git a/docs/component/uniui/uni-load-more.md b/docs/component/uniui/uni-load-more.md
index c3e06f63c30aabaf72447b00ea214d3eede479e3..58cb3b5bb08130f365bdc22d990339f2d33ba4ae 100644
--- a/docs/component/uniui/uni-load-more.md
+++ b/docs/component/uniui/uni-load-more.md
@@ -1,3 +1,4 @@
+# uni-load-more 加载更多
 
 ::: tip 组件名：uni-load-more
 > 代码块： `uLoadMore`
diff --git a/docs/component/uniui/uni-nav-bar.md b/docs/component/uniui/uni-nav-bar.md
index 43f2344f999f654df22fcc45430a47f4dc0e811d..85bcf05ad97b3f3d48bec33c11d762aa01ba15e0 100644
--- a/docs/component/uniui/uni-nav-bar.md
+++ b/docs/component/uniui/uni-nav-bar.md
@@ -1,3 +1,4 @@
+# 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` 被覆盖的可能
 
diff --git a/docs/component/uniui/uni-notice-bar.md b/docs/component/uniui/uni-notice-bar.md
index baa28bda36886d3f01dce350e647f90d57892597..0c7520bcd2f34a2a352def5f003d2f506ad39fed 100644
--- a/docs/component/uniui/uni-notice-bar.md
+++ b/docs/component/uniui/uni-notice-bar.md
@@ -1,3 +1,4 @@
+# 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>
 
 ```
diff --git a/docs/component/uniui/uni-number-box.md b/docs/component/uniui/uni-number-box.md
index a204b192b66d1b6e2dd3defa8f16c6607392db96..68b760a9edbc3a9b11ef6ddeea2bc14a74b08b0f 100644
--- a/docs/component/uniui/uni-number-box.md
+++ b/docs/component/uniui/uni-number-box.md
@@ -1,3 +1,4 @@
+# uni-number-box 数字输入框
 
 ::: tip 组件名：uni-number-box
 > 代码块： `uNumberBox`
diff --git a/docs/component/uniui/uni-pagination.md b/docs/component/uniui/uni-pagination.md
index 8b4de92faa76e1466403df59bc2d2906d6b54162..e5c31b60c01793106d1eb113431251d171ade0cc 100644
--- a/docs/component/uniui/uni-pagination.md
+++ b/docs/component/uniui/uni-pagination.md
@@ -1,54 +1,55 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-popup.md b/docs/component/uniui/uni-popup.md
index 4b41aca975a6398550d3665a9fdb1fc161e61c8f..dd264eccd201b43219497336c1741a85596b3ae4 100644
--- a/docs/component/uniui/uni-popup.md
+++ b/docs/component/uniui/uni-popup.md
@@ -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>
diff --git a/docs/component/uniui/uni-rate.md b/docs/component/uniui/uni-rate.md
index bfe26542ed4bbb1f53b574e28780cfa6a720068c..1cedbaf452f6bc4176842b3656bf8e40837d770f 100644
--- a/docs/component/uniui/uni-rate.md
+++ b/docs/component/uniui/uni-rate.md
@@ -1,3 +1,4 @@
+# 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>
 
 ```
 :::
diff --git a/docs/component/uniui/uni-row.md b/docs/component/uniui/uni-row.md
index 036436b42ca962eccb726fb197ccc879c2f238fd..377586807ed723331c5941cfac34715be86bd57c 100644
--- a/docs/component/uniui/uni-row.md
+++ b/docs/component/uniui/uni-row.md
@@ -1,3 +1,4 @@
+# uni-row 布局-行
 
 ::: tip 组件名 uni-row、uni-col
 > 代码块： `uRow`、`uCol`
diff --git a/docs/component/uniui/uni-sass.md b/docs/component/uniui/uni-sass.md
index 26ac0d23d421eb1108c51080eace0fdf45aa607b..b61260612fdf9acbc35252f37f1fd2487856aa67 100644
--- a/docs/component/uniui/uni-sass.md
+++ b/docs/component/uniui/uni-sass.md
@@ -1,4 +1,4 @@
-
+# uni-sass 辅助样式
 
 `uni-scss` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
 
diff --git a/docs/component/uniui/uni-search-bar.md b/docs/component/uniui/uni-search-bar.md
index b7174653368a799a3bacc3d938b4f204299631f7..27649f11807c4e429d1cf1df9b0f3437be07bfc8 100644
--- a/docs/component/uniui/uni-search-bar.md
+++ b/docs/component/uniui/uni-search-bar.md
@@ -1,3 +1,5 @@
+# uni-search-bar
+
 ::: tip 组件名：uni-search-bar
 > 代码块： `uSearchBar`
 
diff --git a/docs/component/uniui/uni-section.md b/docs/component/uniui/uni-section.md
index 2b078ce51bfa53595d4e7ca5111269c38225b132..860aa1646e8421e5406ee96a940dc0051260364c 100644
--- a/docs/component/uniui/uni-section.md
+++ b/docs/component/uniui/uni-section.md
@@ -1,3 +1,4 @@
+# uni-section 标题栏
 
 ::: tip 组件名：uni-section
 > 代码块： `uSection`
diff --git a/docs/component/uniui/uni-segmented-control.md b/docs/component/uniui/uni-segmented-control.md
index 16153a9bb7093397067d57afd5de4c287436b00d..77a059f4a38ae8c85a6d12a57b118a570d379ec0 100644
--- a/docs/component/uniui/uni-segmented-control.md
+++ b/docs/component/uniui/uni-segmented-control.md
@@ -1,82 +1,83 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-steps.md b/docs/component/uniui/uni-steps.md
index ab79b47547ddb4bf256af3b9e44db753648306f2..f0a262d4250d27de2ee02c3b883599f843138844 100644
--- a/docs/component/uniui/uni-steps.md
+++ b/docs/component/uniui/uni-steps.md
@@ -1,53 +1,54 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-swipe-action.md b/docs/component/uniui/uni-swipe-action.md
index c0d85d4d88409d8f1da5db2cc2e795cb23832fb7..7101741b74921c20a6942bb0fa0d4536ef67e9cb 100644
--- a/docs/component/uniui/uni-swipe-action.md
+++ b/docs/component/uniui/uni-swipe-action.md
@@ -1,3 +1,4 @@
+# uni-swipe-action 滑动操作
 
 ::: tip 组件名：uni-swipe-action
 > 代码块： `uSwipeAction`、`uSwipeActionItem`
diff --git a/docs/component/uniui/uni-swiper-dot.md b/docs/component/uniui/uni-swiper-dot.md
index 83fe0b9005e2e5f0cb59b491c1582bdb9b4342e4..94840f1cd96840df91aa0f4f1770a101a67ce728 100644
--- a/docs/component/uniui/uni-swiper-dot.md
+++ b/docs/component/uniui/uni-swiper-dot.md
@@ -1,3 +1,4 @@
+# uni-swiper-dot 轮播图指示点
 
 ::: tip 组件名：uni-swiper-dot
 > 代码块： `uSwiperDot`
diff --git a/docs/component/uniui/uni-table.md b/docs/component/uniui/uni-table.md
index 9d16f56ecc7385ccda6755a4851c54bcf833ca98..6c6ecf3ecffcb7fe8804b8dda444f24015308bb0 100644
--- a/docs/component/uniui/uni-table.md
+++ b/docs/component/uniui/uni-table.md
@@ -1,3 +1,5 @@
+# uni-table 表格
+
 ::: tip 组件名：uni-table
 > 代码块： `uTable`
 
diff --git a/docs/component/uniui/uni-tag.md b/docs/component/uniui/uni-tag.md
index f8458b70f88b4e307ee1b5566f40b64320c0504d..29ef89fa54166b4354382f1c077585277f9bfcea 100644
--- a/docs/component/uniui/uni-tag.md
+++ b/docs/component/uniui/uni-tag.md
@@ -1,54 +1,55 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-title.md b/docs/component/uniui/uni-title.md
index 1c57ef21d439661fa10b7c710f8148a6669b7949..a0d3c7d0e68dc6436932c8920e319113de3f4956 100644
--- a/docs/component/uniui/uni-title.md
+++ b/docs/component/uniui/uni-title.md
@@ -1,72 +1,73 @@
-
-::: 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
diff --git a/docs/component/uniui/uni-tooltip.md b/docs/component/uniui/uni-tooltip.md
index 6e14a5bbe1c638292b49679f922ca1ae2b010a56..366a41a83d253e18d12dc509f547e47a13e6deb8 100644
--- a/docs/component/uniui/uni-tooltip.md
+++ b/docs/component/uniui/uni-tooltip.md
@@ -1,3 +1,5 @@
+# uni-tooltip 文字提示
+
 ::: tip 组件名：uni-tooltip
 
 > 代码块： `utooltip`
diff --git a/docs/component/uniui/uni-transition.md b/docs/component/uniui/uni-transition.md
index ca887e1763468b8eb80704613107935e74ce20b8..19d0df1a2371d896bed4867e9ea49e6bc9eb8143 100644
--- a/docs/component/uniui/uni-transition.md
+++ b/docs/component/uniui/uni-transition.md
@@ -1,3 +1,5 @@
+# uni-transition 过渡动画
+
 ::: tip 组件名：uni-transition
 > 代码块： `uTransition`
 
diff --git a/docs/component/video.md b/docs/component/video.md
index 1f9de2809a7dc018d675f358a5282ed66a465dd1..1a7f570e50f01f9f6a455ba376f1977d8008a482 100644
--- a/docs/component/video.md
+++ b/docs/component/video.md
@@ -1,7 +1,7 @@
-#### 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
diff --git a/docs/component/view.md b/docs/component/view.md
index 35d54d0a28eafb98787ec36b9c48e3523d66804b..99df9d594e17bbe235f5cd6aa1b6e41a1a69377a 100644
--- a/docs/component/view.md
+++ b/docs/component/view.md
@@ -1,14 +1,16 @@
-所有的视图组件，包括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>` 以提升渲染性能。
diff --git a/docs/component/vue-component.md b/docs/component/vue-component.md
index bfb75527755f6238273800f2e5cddb7cf5e53ebc..18ed26e2da0d13b5f7cf70f9bb64bbcd40991983 100644
--- a/docs/component/vue-component.md
+++ b/docs/component/vue-component.md
@@ -1,10 +1,10 @@
-### 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小程序	|快手小程序|京东小程序|
 |:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|:-:		|:-:		|
diff --git a/docs/component/waterfall.md b/docs/component/waterfall.md
index eb86339f6213947107fa42b9c16004da84f7b9e5..690217776496aff3d583b3d2660adf8cd6cea46e 100644
--- a/docs/component/waterfall.md
+++ b/docs/component/waterfall.md
@@ -62,7 +62,7 @@ app端nvue专用组件。
 - appear：用于监听子组件出现事件（一般绑定于子组件之上例如：监听最后一个元素出现，加载新的数据）
 - disappear：用于监听子组件滑出屏幕事件（一般绑定于子组件之上）
 
-**注意**
+#### 注意
 - waterfall是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
 - 如出现waterfall列表下边大面积空白区域（多列和单列时的整体高度相同，多列展示没有高度自适应），那么可以将waterfall放到父容器下边，给父容器高度设置为窗口高度，除瀑布流展示的列表外，其他的组件都放在<header>中即可。
 示例代码如下：
diff --git a/docs/component/web-view.md b/docs/component/web-view.md
index 2bafb4c40470ee8f959cdcff7d59a9ec9273298c..fe6aedcd7a5fa094d5c9ca884eb328e16d099744 100644
--- a/docs/component/web-view.md
+++ b/docs/component/web-view.md
@@ -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 中，添加以下代码：