tmui-cli 2.0.2 → 2.0.4

package/data/uni-app-x-docs/component/picker-view.md

@@ -0,0 +1,48 @@
+<!-- ## picker-view -->
+
+<!-- UTSCOMJSON.picker-view.name -->
+
+<!-- UTSCOMJSON.picker-view.description -->
+
+<!-- UTSCOMJSON.picker-view.compatibility -->
+
+<!-- UTSCOMJSON.picker-view.attribute -->
+
+<!-- UTSCOMJSON.picker-view.event -->
+
+<!-- UTSCOMJSON.picker-view.component_type-->
+
+<!-- UTSCOMJSON.picker-view.children -->
+
+### 支付宝小程序注意事项
+
+支付宝小程序动态设置 `picker-view` 指示器样式时可能出现偏移，建议使用静态配置，避免运行时修改指示器样式。
+
+<!-- UTSCOMJSON.picker-view.example -->
+
+<!-- UTSCOMJSON.picker-view.reference -->
+
+<!-- ## picker-view-column -->
+
+<!-- UTSCOMJSON.picker-view-column.name -->
+
+<!-- UTSCOMJSON.picker-view-column.description -->
+
+<!-- UTSCOMJSON.picker-view-column.compatibility -->
+
+<!-- UTSCOMJSON.picker-view-column.attribute -->
+
+<!-- UTSCOMJSON.picker-view-column.event -->
+
+<!-- UTSCOMJSON.picker-view-column.component_type-->
+
+<!-- UTSCOMJSON.picker-view-column.children -->
+
+<!-- UTSCOMJSON.picker-view-column.example -->
+
+<!-- UTSCOMJSON.picker-view-column.reference -->
+
+## tips
+- picker里如放置较长内容，应该使用list-view而不是scroll-view。
+- uni ui的[uni-data-picker](https://ext.dcloud.net.cn/plugin?id=3796)，是封装好的弹出式、分列加载的、DataCom规范的多列选择组件，适用于地址选择等场景。
+- 注意 `<picker-view-column>` 仅可放置于 `<picker-view />`

package/data/uni-app-x-docs/component/picker.md

@@ -0,0 +1,29 @@
+<!-- ## picker -->
+
+<!-- UTSCOMJSON.picker.name -->
+
+<!-- UTSCOMJSON.picker.description -->
+
+<!-- UTSCOMJSON.picker.compatibility -->
+
+picker组件其实是基于[picker-view组件](picker-view.md)封装了一个弹出形态。
+
+5.08版本以前的Android/iOS平台可改用[picker-view组件](picker-view.md)、或[uni.showActionSheet](../api/action-sheet.md)。
+
+或者使用开源组件[uni-data-picker](https://ext.dcloud.net.cn/plugin?id=3796)。这是也是基于[picker-view组件](picker-view.md)封装的云端一体组件，如果需要选择城市，那么推荐使用该组件。
+
+<!-- UTSCOMJSON.picker.attribute -->
+
+### 支付宝小程序注意事项
+
+支付宝小程序不支持 `picker` 的 `mode` 属性，如需多平台兼容，需要为支付宝小程序单独处理选择能力。
+
+<!-- UTSCOMJSON.picker.event -->
+
+<!-- UTSCOMJSON.picker.component_type -->
+
+<!-- UTSCOMJSON.picker.children -->
+
+<!-- UTSCOMJSON.picker.example -->
+
+<!-- UTSCOMJSON.picker.reference -->

package/data/uni-app-x-docs/component/progress.md

@@ -0,0 +1,19 @@
+<!-- ## progress -->
+
+<!-- UTSCOMJSON.progress.name -->
+
+<!-- UTSCOMJSON.progress.description -->
+
+<!-- UTSCOMJSON.progress.compatibility -->
+
+<!-- UTSCOMJSON.progress.attribute -->
+
+<!-- UTSCOMJSON.progress.event -->
+
+<!-- UTSCOMJSON.progress.component_type-->
+
+<!-- UTSCOMJSON.progress.children -->
+
+<!-- UTSCOMJSON.progress.example -->
+
+<!-- UTSCOMJSON.progress.reference -->

package/data/uni-app-x-docs/component/radio-group.md

@@ -0,0 +1,21 @@
+<!-- ## radio-group -->
+
+<!-- UTSCOMJSON.radio-group.name -->
+
+<!-- UTSCOMJSON.radio-group.description -->
+
+同一个radio-group下的多个radio为单选效果，选中一个radio后其他radio将失去选中效果。
+
+<!-- UTSCOMJSON.radio-group.compatibility -->
+
+<!-- UTSCOMJSON.radio-group.attribute -->
+
+<!-- UTSCOMJSON.radio-group.event -->
+
+<!-- UTSCOMJSON.radio-group.component_type-->
+
+<!-- UTSCOMJSON.radio-group.children -->
+
+<!-- UTSCOMJSON.radio-group.example -->
+
+<!-- UTSCOMJSON.radio-group.reference -->

package/data/uni-app-x-docs/component/radio.md

@@ -0,0 +1,27 @@
+<!-- ## radio -->
+
+<!-- UTSCOMJSON.radio.name -->
+
+<!-- UTSCOMJSON.radio.description -->
+
+<!-- UTSCOMJSON.radio.compatibility -->
+
+<!-- UTSCOMJSON.radio.attribute -->
+
+<!-- UTSCOMJSON.radio.event -->
+
+<!-- UTSCOMJSON.radio.component_type -->
+
+<!-- UTSCOMJSON.radio.children -->
+
+### 支付宝小程序注意事项
+
+支付宝小程序不支持将文本或 `text` 组件放在 `radio` 组件内部。选项文本应与 `radio` 作为同级节点放置，通常可使用 `label` 包裹同级的 `radio` 和文本。
+
+### 暗黑模式
+
+App平台蒸汽模式从 5.25+ 起内置适配 radio 默认样式的暗黑模式。暗黑模式下，radio 未选中时背景色为 `#2c2c2c`，边框色为 `#656565`；选中时背景色和边框色为 `#007AFF`，图标颜色为 `#ffffff`；禁用时边框色为 `#373737`，图标颜色为 `#656565`。
+
+<!-- UTSCOMJSON.radio.example -->
+
+<!-- UTSCOMJSON.radio.reference -->

package/data/uni-app-x-docs/component/rich-text.md

@@ -0,0 +1,108 @@
+<!-- ## rich-text -->
+
+<!-- UTSCOMJSON.rich-text.name -->
+
+<!-- UTSCOMJSON.rich-text.description -->
+
+以往开发者在app平台渲染富文本，大多使用webview。但webview启动慢、快滚白屏，在部分设备上被限死刷新率不能超过60帧。
+
+虽然uni-app x的rich-text组件也支持mode=web，但在app平台蒸汽模式下，提供了c语言全新实现的rich-text mode=native。
+
+uni-app x 蒸汽模式的rich-text native，应该是业内最佳的富文本呈现的解决方案。可以瞬间加载5万字长文、多图混排，流畅的快速滚动，不白屏、不掉帧。[详见评测](../app-vapor.md#rich-text)。
+
+<!-- UTSCOMJSON.rich-text.compatibility -->
+
+### 支持的HTML标签和属性
+|HTML   |属性    |样式   |
+|-------|-------|-------|
+|br     |       |       |
+|p      |       |text-align color background-color text-decoration|
+|ul     |       |       |
+|li     |       |text-align color background-color text-decoration|
+|span   |       |color background-color text-decoration|
+|strong |       |       |
+|i      |       |       |
+|big    |       |       |
+|small  |       |       |
+|a      |href   |       |
+|u      |       |       |
+|del    |       |       |
+|h1-h6  |       |       |
+|img    |src    |       |
+
+> text-decoration仅支持line-through
+> 仅在 app-android 平台 VDOM 模式下且配置 mode=native 时受上述表格限制
+
+<!-- UTSCOMJSON.rich-text.attribute -->
+
+### 节点列表数据结构
+``` json
+{
+    name: "p", // 标签名
+    attrs: {
+        style: "color: red;" // 样式
+    },
+    children: [ // 子节点
+        {
+            text: "hello uni-app x" // 文本节点
+        },
+        {
+            name: "img", // img 标签
+            attrs: {
+                src: "https://web-ext-storage.dcloud.net.cn/uni-app-x/logo.ico",
+                width: "100",
+                height: "100"
+            }
+        },
+        {
+            name: "a", // a 标签
+            attrs: {
+                href: "https://www.dcloud.io"
+            }
+        }
+    ]
+}
+```
+
+<!-- UTSCOMJSON.rich-text.event -->
+
+<!-- UTSCOMJSON.rich-text.component_type-->
+
+<!-- UTSCOMJSON.rich-text.children -->
+
+<!-- UTSCOMJSON.rich-text.example -->
+
+<!-- UTSCOMJSON.rich-text.reference -->
+
+## rich-text的mode介绍
+
+rich-text组件，在web和小程序本身就是webview渲染的。在app平台，有2种mode，web和native。
+
+- web模式：每个rich-text都使用一个web-view来渲染内容。初始化速度略慢，页面中有多个rich-text组件就意味着有多个web-view，会很卡。
+- native模式：在app蒸汽模式下使用c语言自绘。它的流畅度无与伦比，可以瞬间加载5万字长文多图混排、流畅的快速滚动不白屏不掉帧。[详见评测](../app-vapor.md#rich-text)。
+但是它的模块体积较大，每个cpu类型需要8M的so库。
+
+- 原生markdown渲染：官方提供了markdown解析，动态拼接原生组件的方案，在[uni-ai x开源项目](https://ext.dcloud.net.cn/plugin?id=23902)中可以体验
+
+## 全局样式
+
+rich-text组件的style或class中，支持如下几个css属性，用于设置全局样式。全局样式优先级低于rich-text内容中的样式设置。
+
+- font-size
+- font-family
+- line-height
+- color App平台需HBuilderX5.21+
+
+## 调整历史@change
+
+在4.7版以前，Android是kotlin实现的rich-text，但与web规范拉齐度较低；iOS使用的是web-view；鸿蒙使用的是系统的rich-text，但该rich-text也是基于web-view实现且有细节问题。
+
+从uni-app x4.7+，3个App平台统一使用web-view实现。鸿蒙平台直接替换了之前的实现，而Android平台则新增了mode属性配置，默认是web-view实现，但也可以通过mode=native继续使用之前的原生kotlin方式。
+
+App平台从蒸汽模式开始，新增了c语言实现的 rich-text。3个App平台均支持 mode 属性配置，默认是 `web-view` 实现，可以通过设置 `mode=native` 使用原生方式。Android蒸汽模式的rich-text mode native，也从kotlin实现统一改为更快的c语言实现。
+
+## Bug & Tips@tips
+- rich-text不支持video组件，如果涉及video，需拆分文本内容，在video前后各放置一个rich-text组件
+- 小程序的rich-text功能要弱一些，不支持rich-text中子内容的点击事件，如有这类需求，在小程序平台需要条件编译使用[mp-html](https://ext.dcloud.net.cn/search?q=mp-html)
+- App-Android 平台 vdom模式 且 mode=native 时，HTML String 类型的`<img/>`不支持自定义宽高，默认以 rich-text 组件宽度为基准等比缩放；节点列表类型的`<img />`支持自定义宽高。
+- App-Harmony App-iOS 平台 且 mode=native 时，暂不支持 `selectable` 属性。 

package/data/uni-app-x-docs/component/root-portal.md

@@ -0,0 +1,19 @@
+<!-- ## root-portal -->
+
+<!-- UTSCOMJSON.root-portal.name -->
+
+<!-- UTSCOMJSON.root-portal.description -->
+
+<!-- UTSCOMJSON.root-portal.compatibility -->
+
+<!-- UTSCOMJSON.root-portal.attribute -->
+
+<!-- UTSCOMJSON.root-portal.event -->
+
+<!-- UTSCOMJSON.root-portal.component_type -->
+
+<!-- UTSCOMJSON.root-portal.children -->
+
+<!-- UTSCOMJSON.root-portal.example -->
+
+<!-- UTSCOMJSON.root-portal.reference -->

package/data/uni-app-x-docs/component/scale-gesture-handler.md

@@ -0,0 +1,19 @@
+<!-- ## scale-gesture-handler -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.name -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.description -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.compatibility -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.attribute -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.event -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.component_type -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.children -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.example -->
+
+<!-- UTSCOMJSON.scale-gesture-handler.reference -->

package/data/uni-app-x-docs/component/scroll-view.md

@@ -0,0 +1,213 @@
+<!-- ## scroll-view -->
+
+<!-- UTSCOMJSON.scroll-view.name -->
+
+<!-- UTSCOMJSON.scroll-view.description -->
+
+<!-- UTSCOMJSON.scroll-view.compatibility -->
+
+<!-- UTSCOMJSON.scroll-view.attribute -->
+
+<!-- UTSCOMJSON.scroll-view.event -->
+
+<!-- UTSCOMJSON.scroll-view.component_type-->
+
+<!-- UTSCOMJSON.scroll-view.children -->
+
+### Android的overscroll、bounce、下拉刷新说明@overscroll
+
+overscroll，中文译为过度滚动。
+
+Android原生的滚动容器，在滚动到边缘时，并不能继续滚动，也就是不能overscroll。而iOS、鸿蒙、web、小程序，都支持overscroll。
+
+支持overscroll，意味着滚动到边缘时继续拉，还能拉动，松手后会回弹。
+
+而Android原生不能overscroll，所以滚动到边缘继续拉，是拉伸效果（低版本是弧光）。
+
+uni-app x 的Android版，在蒸汽模式下支持了overscroll属性，默认是Android原生表现，配置overscroll为true时，可达到iOS、鸿蒙、web、小程序相同的效果。
+
+需注意：bounce属性和下拉刷新若干属性的表现，是受overscroll的影响的。
+
+- overscroll为false时
+	即原生Android效果。\
+	配置了bounce为true，bounce效果是拉伸（低版本是弧光）。\
+	开启下拉刷新后，下拉刷新也是Android原生效果，一个悬浮圆球中有个圆弧箭头被拉了下来。此时不会出现类iOS的下拉刷新，因为没有滚动内容外区域可以展示loading。
+	此时圆弧箭头的背景圆的颜色，通过属性refresher-background来设置，且不支持透明。
+- overscroll为true时
+	即类似iOS效果。滚动到边缘继续拉还能再拉出内容。\
+	配置了bounce为true，bounce效果是弹簧。\
+	开启下拉刷新后，下拉刷新会拉出[loading组件](./loading.md)。
+
+默认的下拉刷新自定义能力不足，推荐使用下面的[自定义下拉刷新](#customrefresh)
+
+在VDOM模式时，Android的scroll-view开启下拉刷新后，上方使用的是回弹效果，下方使用的是拉伸效果，下拉刷新使用的是iOS雪花，存在UI逻辑不统一问题。在蒸汽模式不再存在此问题，但升级时需要注意这种差别。
+
+### 自定义下拉刷新样式@customrefresh
+
+1. 设置`refresher-default-style`属性为 none 不使用默认样式
+2. 自定义下拉刷新元素必须要声明为 slot="refresher"，需要设置刷新元素宽高信息否则可能无法正常显示！
+3. 通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素！实现预期效果
+
+uni-ui x 提供了开源的自定义下拉刷新组件，可以体验：[uni-refresh-box](https://doc.dcloud.net.cn/uni-app-x/component/uni-ui-x/uni-refresh-box.html)
+
+**注意：**
+- 安卓、iOS平台目前自定义下拉刷新元素不支持放在scroll-view的首个子元素位置上。可能无法正常显示
+- 鸿蒙平台自定义下拉刷新元素要放在最后一个子元素的位置，否则顶部可能出现空白区域
+- 支付宝小程序不支持通过 `slot="refresher"` 自定义下拉刷新内容，相关内容需通过条件编译排除支付宝小程序
+
+```vue
+<scroll-view refresher-default-style="none" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
+			 @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
+			 @refresherrestore="onRefresherrestore" style="flex:1" >
+
+		<view v-for="i in 20" class="content-item">
+			<text class="text">item-{{i}}</text>
+		</view>
+
+		<!-- 自定义下拉刷新元素 -->
+		<view slot="refresher" class="refresh-box">
+			<text class="tip-text">{{text[state]}}</text>
+		</view>
+
+</scroll-view>
+```
+
+**具体代码请参考：**[自定义下拉刷新样式示例](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/component/scroll-view/scroll-view-custom-refresher-props.uvue)
+
+### 嵌套模式@nested-scroll-view
+
+VDOM模式的scroll-view嵌套滚动需要更多手工工作。而蒸汽模式已经简化。
+
+### 蒸汽模式
+
+蒸汽模式已废弃 `type` 属性，只需要设置内层 scroll-view 的 `associative-container` 属性为 "nested-scroll-view" 即可开启嵌套模式。
+
+蒸汽模式已废弃 `nested-scroll-header` 和 `nested-scroll-body` 组件的限制要求，嵌套滚动中外层 scroll-view 中可以不使用 `nested-scroll-header` 和 `nested-scroll-body`，在内层 scrol-view 中设置 `associative-container` 属性为 "nested-scroll-view" 即可开启嵌套模式。
+
+#### VDOM模式
+
+当存在两个 scroll-view 相互嵌套的场景时，两者滚动存在冲突不能很丝滑的进行衔接，可将外层 scroll-view 改成嵌套模式，这样可以让两个 scroll-view 的滚动衔接起来。
+
+```html
+<scroll-view style="flex:1" type="nested">
+	<nested-scroll-header>
+		<view style="height: 200px;background-color: #66ccff;align-items: center;justify-content: center;">
+			<text>nested-scroll-header</text>
+		</view>
+	</nested-scroll-header>
+	<nested-scroll-body>
+		<view style="flex:1">
+			<scroll-view style="flex:1" associative-container="nested-scroll-view">
+				<view v-for="index in 20" style="background-color: aliceblue; height: 80px;justify-content: center;">
+					<text style="color: black;">{{index}}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</nested-scroll-body>
+</scroll-view>
+```
+
+**开启嵌套模式设置如下：**
+
+1. 设置外层 scroll-view 的 type 属性为 "nested"（），将外层 scroll-view 改成嵌套模式
+2. 设置内层 scroll-view 的 `associative-container`  属性为 "nested-scroll-view"，开启内层 scroll-view 支持与外层 scroll-view 嵌套滚动
+
+
+**嵌套滚动策略：**
+
+当向下滚动（手指向上滑动）时，先滚动外层 scroll-view 再滚动内层 scroll-view；当向上滚动（手指向下滑动）时，先滚动内层 scroll-view 再滚动外层 scroll-view
+
+**注意事项：**
++ 4.11版本开始支持嵌套模式
++ 外层 scroll-view 的子节点只支持`nested-scroll-header`和`nested-scroll-body`和自定义 refresher
++ 外层 scroll-view 的子节点中只能有一个 `nested-scroll-body`
++ `nested-scroll-header` 和 `nested-scroll-body` 只能有一个子节点
++ `nested-scroll-header` 只能渲染在 `nested-scroll-body` 上面
++ 与nested-scroll嵌套滚动协商互不兼容，`nested-scroll-header` 和 `nested-scroll-body`优先级高于nested-scroll嵌套滚动协商
++ 内层滚动视图支持 scroll-view、list-view、waterflow
+
+**具体代码请参考：**[嵌套模式示例](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/template/long-list-nested/long-list-nested.uvue)
+
+
+### nested-scroll嵌套滚动协商@nested
+
+嵌套滚动是原生才有的概念，web没有。
+
+它是指父子2个滚动容器嵌套，在滚动时可以互相协商，控制父容器怎么滚、子容器怎么滚。
+
+1. 通过在子滚动容器设置`custom-nested-scroll = true`，开启与父组件实现嵌套滚动协商。仅list-view、waterflow、scroll-view组件支持与父组件嵌套滚动协商。
+
+下面的示例代码，在一个scroll-view中嵌套了一个list-view。在list-view上设置了custom-nested-scroll="true"。
+
+```html
+<scroll-view style="height: 100%;" scroll-y="true" rebound ="false" nested-scroll-child="listview" @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll"
+	@stopnestedscroll="onStopNestedScroll">
+		...
+		<view style="height: 100px;">停靠视图</view>
+		<list-view id="listview"  class="child-scroll" scroll-y="true" custom-nested-scroll="true">
+			...
+		</list-view>
+</scroll-view>
+```
+
+2. 子组件准备滚动时会触发父组件的`startnestedscroll`事件。父组件响应`startnestedscroll`事件return true则表示与子组件建立嵌套滚动协商。
+```ts
+onStartNestedScroll(event: StartNestedScrollEvent): Boolean {
+	//开启与子组件建立嵌套滚动协商
+	return true
+}
+```
+3. 当建立嵌套滚动协商后，子组件滚动时父组件会持续收到`nestedprescroll`事件，这个事件的含义是嵌套滚动即将发生。
+事件中会返回NestedPreScrollEvent子组件将要滚动的数据。
+4. 父组件执行NestedPreScrollEvent.consumed(x,y)函数，告知子组件本次`nestedprescroll`事件deltaX、deltaY各消耗多少，即父组件要消费掉多少滚动距离。
+子组件将执行差值后的deltaX、deltaY滚动距离，也就是剩余的滚动余量留给子组件。
+```ts
+onNestedPreScroll(event: NestedPreScrollEvent) {
+	var deltaY = event.deltaY
+	var deltaX = event.deltaX
+	...
+	if() {
+		//告知子组件deltaX、deltaY各消耗多少
+		event.consumed(x, y)
+	}
+}
+```
+5. 父组件配置`nested-scroll-child`后，父组件惯性滚动时会让`nested-scroll-child`配置的子元素进行滚动。从而触发`nestedprescroll`协商处理滚动事件
+6. 滚动行为停止后会触发`stopnestedscroll`事件
+
+**注意：**
++ 嵌套滚动协商仅在 Android + VDOM 模式下支持，蒸气模式下无效
++ 嵌套滚动协商仅支持竖向滚动，横向滚动不支持
++ nested-scroll-child设置的元素必须配置custom-nested-scroll = true，否则配置无效
++ 与`nested-scroll-header` 和 `nested-scroll-body`不兼容，scroll-view 设置嵌套模式后，嵌套滚动手势协商相关事件将不会触发
+
+**具体代码请参考：**[nested-scroll嵌套滚动示例](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/template/long-list-perf/long-list-perf.uvue)
+
+### tips
+
+#### App平台通用注意事项
++ App-Android、App-iOS平台的滚动方向不能同时横竖，如需同时水平和垂直滚动，可以套2层，一个横一个竖，来实现2个方向能滚动。
++ App平台scroll-view组件不支持动态切换横竖滚动方向
++ App平台scroll-view组件的overflow属性不支持配置visible
++ App平台scroll-view组件默认高度取值：
+	- scroll-view组件的子元素高度之和未超过scroll-view组件的父元素高度：
+		+ scroll-view组件的默认高度取值为子元素高度之和
+	- scroll-view组件的子元素高度之和超过scroll-view组件的父元素高度：
+		+ 4.0版本开始scroll-view组件的默认高度取值为子元素高度之和。
+    
++ scroll-view无法滚动注意事项：
+	scroll-view组件的内容高度需要大于scroll-view组件的高度，才能滚动。
+	如未给scroll-view设置高度，那么其高度默认与子内容相同，就会导致无法滚动。\
+	开发者需要设置css属性定义scroll-view组件高度，让scroll-view组件高度小于子元素高度之和，实现滚动能力。可以指定scroll-view的height，也可以设置flex:1来撑满剩余空间。
+		
++ 横向滚动时注意关注flex方向，子内容如需横向排布需要加`flex-direction: row`。
+
+#### App平台蒸汽模式注意事项
+
+
+#### App平台VDOM模式注意事项
+
+
+<!-- UTSCOMJSON.scroll-view.example -->
+
+<!-- UTSCOMJSON.scroll-view.reference -->

package/data/uni-app-x-docs/component/share-element.md

@@ -0,0 +1,84 @@
+<!-- ## share-element -->
+
+<!-- UTSCOMJSON.share-element.name -->
+
+<!-- UTSCOMJSON.share-element.description -->
+
+共享元素组件，用于页面转场动画。指A、B 2个页面之间在动画时共享某个组件，这个组件在转场动画中通过特殊的动画从A页面的位置移动到B页面的位置。
+
+常见场景有：
+1. 商品列表的商品缩略图，点击进入商品详情页面时，把缩略图变成共享元素，放大到详情页面的新位置。
+2. 相册应用，点击缩略图，先放大到详情页的大图位置，然后后台加载大图，完毕后再显示大图。
+3. 视觉上跨页面一直显示的一个组件，比如播放条、悬浮球。
+
+在hello uni-app x中，组件->视图容器下有共享元素示例，在模板->列表到详情 中也提供了演示。
+
+注意共享元素组件仅指的是动画的视觉共享，并不是2个页面真的复用了同一个组件实例，不同页面的组件仍然是各自单独的实例。
+
+<!-- UTSCOMJSON.share-element.compatibility -->
+
+<!-- UTSCOMJSON.share-element.attribute -->
+
+
+### 指定飞跃物
+
+开发者可以指定选定源页面或目标页的 `share-element` 作为飞跃物
+
+假定 `A` 页和 `B` 页存在对应的 `share-element` 组件
+
+#### push 阶段
+
++ 通过 uni.navigateTo 由 `A` 进入 `B`，称 `A` 为源页面（from 页)，`B` 为目标页（to 页)
++ 默认采用 `B` 页的 `share-element` 组件进行飞跃，设置属性 shuttle-on-push=from 可切换成 A 页的 `share-element` 组件
+
+<img src="https://web-ext-storage.dcloud.net.cn/uni-app-x/component/share-element/share-element-01.png" width="600" height="378">
+
+#### pop 阶段
+
++ 通过 uni.navigateBack 由 `B` 返回 `A`，此时 `B` 为源页面 (from 页)， `A` 为目标页（to 页）
++ 默认采用 `A `页的 `share-element` 组件，设置属性 shuttle-on-pop=from 可切换成 `B` 页的 `share-element` 组件
+
+<img src="https://web-ext-storage.dcloud.net.cn/uni-app-x/component/share-element/share-element-02.png" width="600" height="378">
+
+#### 注意事项
+
++ android平台不支持设定shuttle-on-push、shuttle-on-pop，push阶段飞跃物是 `B` 页面（to 页)的 `share-element` 组件，pop阶段飞跃物也是 `B` 页面(from 页)的 `share-element` 组件
++ `share-element` 组件执行共享元素动画过程中会将 `share-element` 的`飞跃物`显示在页面最顶层，这会导致部分场景原本被其他元素遮挡的 `share-element` 会显示完整内容，这是为了更好的过度穿越效果并非Bug
+
+### 用法
+
+`A` 页面
+
+```html
+<template>
+	<view style="flex: 1;">
+		<share-element style="width: 200px;height: 200px;" share-key="box" >
+			<view style="width: 200px;height: 200px; background-color: red;"></view>
+		</share-element>
+	</view>
+</template>
+```
+
+`B` 页面
+
+```html
+<template>
+	<view style="flex: 1;">
+		<share-element style="width: 400px;height: 400px;" share-key="box" >
+			<view style="width: 400px;height: 400px; background-color: red;"></view>
+		</share-element>
+	</view>
+</template>
+```
+
+`A` 和 `B` 页面分别设置 `share-element` 的 share-key 属性值，需要一致并且唯一，这样两个共享元素则会建立共享关系，切页动画时则会触发共享元素过度动画效果。
+
+<!-- UTSCOMJSON.share-element.event -->
+
+<!-- UTSCOMJSON.share-element.component_type -->
+
+<!-- UTSCOMJSON.share-element.children -->
+
+<!-- UTSCOMJSON.share-element.example -->
+
+<!-- UTSCOMJSON.share-element.reference -->

package/data/uni-app-x-docs/component/slider.md

@@ -0,0 +1,44 @@
+<!-- ## slider -->
+
+<!-- UTSCOMJSON.slider.name -->
+
+<!-- UTSCOMJSON.slider.description -->
+
+<!-- UTSCOMJSON.slider.compatibility -->
+
+<!-- UTSCOMJSON.slider.attribute -->
+
+<!-- UTSCOMJSON.slider.event -->
+
+<!-- UTSCOMJSON.slider.component_type-->
+
+## tips
+show-value属性设为true后，会在横条右侧显示一个数字。
+
+但注意app-uvue中，value显示区的默认宽度是4位数字。超出宽度后，后面的数字无法显示。即最大9999。（其他平台不限制）
+
+如您需要5位或更多数字，请将show-value设为false或不设，自行写一个text组件，绑定value的数值来显示。
+
+- uni-app x 的 App 和 web 平台的样式效果和 W3C 的效果一致，球的左边距/右边距和轨道是对齐的，app-vue/web/小程序 平台会溢出球半径
+- 在 uni-app x 的 App 和 web 平台高度为 `block-size(28px) 大小 + 阴影(4px * 2)`，默认 `margin: 1px 0;`，暂不支持设置 padding，实际占用高度为 `38px`
+- 在 app-vue/web/小程序 平台高度为 18px, 默认 `margin: 10px 18px;`，实际占用高度为 `38px`
+- 默认占用高度是一致的，调整样式后会出现差异
+- 4.18+ App-Android 平台，优化了在滚动容器中的行为，当水平拖动 slider 超过 4 * dpi 时将阻止默认行为，避免滚动过程中触发 slider 变动
+- app-ios平台不支持padding style（padding-top、padding-left、padding-right、padding-bottom）
+- 平台差异：当 max 值不能整除 step 值时，app-android/web 平台滑块不能滑动到最末端，最大滑动值为 max 值整除 step 值的位置，app-ios/微信小程序平台滑块可以滑动到最末端，返回值会四舍五入到 step 的精度值，app-ios 平台 4.33 版本调整为和 app-android/web 平台一致，示例如下:
+```html
+<template>
+  <view>
+    <!-- app/web 平台滑块不能滑动到最末端，最大滑动值为10  -->
+    <!-- 微信小程序 滑块可以滑动到最末端，取值会四舍五入为 11 -->
+    <slider :min="0" :max="10.5" :step="1" :show-value="true" />
+  </view>
+</template>
+```
+
+
+<!-- UTSCOMJSON.slider.children -->
+
+<!-- UTSCOMJSON.slider.example -->
+
+<!-- UTSCOMJSON.slider.reference -->

package/data/uni-app-x-docs/component/snapshot.md

@@ -0,0 +1,19 @@
+<!-- ## snapshot -->
+
+<!-- UTSCOMJSON.snapshot.name -->
+
+<!-- UTSCOMJSON.snapshot.description -->
+
+<!-- UTSCOMJSON.snapshot.compatibility -->
+
+<!-- UTSCOMJSON.snapshot.attribute -->
+
+<!-- UTSCOMJSON.snapshot.event -->
+
+<!-- UTSCOMJSON.snapshot.component_type -->
+
+<!-- UTSCOMJSON.snapshot.children -->
+
+<!-- UTSCOMJSON.snapshot.example -->
+
+<!-- UTSCOMJSON.snapshot.reference -->