tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/share-element.md

@@ -0,0 +1,221 @@
+::: sourceCode
+## share-element
+
+> 组件类型：UniShareElement 
+
+ 共享元素
+
+共享元素组件，用于页面转场动画。指A、B 2个页面之间在动画时共享某个组件，这个组件在转场动画中通过特殊的动画从A页面的位置移动到B页面的位置。
+
+常见场景有：
+1. 商品列表的商品缩略图，点击进入商品详情页面时，把缩略图变成共享元素，放大到详情页面的新位置。
+2. 相册应用，点击缩略图，先放大到详情页的大图位置，然后后台加载大图，完毕后再显示大图。
+3. 视觉上跨页面一直显示的一个组件，比如播放条、悬浮球。
+
+在hello uni-app x中，组件->视图容器下有共享元素示例，在模板->列表到详情 中也提供了演示。
+
+注意共享元素组件仅指的是动画的视觉共享，并不是2个页面真的复用了同一个组件实例，不同页面的组件仍然是各自单独的实例。
+
+### 兼容性 
+| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS |
+| :- | :- | :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.51 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.51 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| share-key | string |   | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 映射标记，页面内唯一 |
+| easing-function | string | "ease-out" | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | `css`缓动函数 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| ease | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 表示过渡效果开始缓慢，然后逐渐加速，最后减速结束。这是大多数情况下的推荐值，因为它创建了平滑的过渡效果 |
+| ease-out | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 过渡开始时较快，然后逐渐减速。这会在过渡末尾创建一个缓慢的效果 |
+| ease-in | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 过渡开始时较慢，然后逐渐加速。这会在过渡初期创建一个缓慢的效果 |
+| ease-in-out | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 过渡开始时较慢，然后加速，最后减速。这是一个结合了ease-in和ease-out的时间函数，产生平滑的过渡效果 |
+| linear | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 过渡效果是线性的，速度保持恒定，没有加速或减速。这会在整个过渡期间保持相同的速度 |
+| cubic-bezier | Web x / 微信小程序 x / Android(VDOM) 4.51 / Android(Vapor) x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 用于自定义 CSS 过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化 |
+| shuttle-on-push | string | "to" | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 指定 push 阶段的飞跃物 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| from | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | push 阶段采用源页面节点作为飞跃物 |
+| to | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | push 阶段采用目标页面节点作为飞跃物 |
+| shuttle-on-pop | string | "to" | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 指定 pop 阶段的飞跃物 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| from | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | pop 阶段采用源页面节点作为飞跃物 |
+| to | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | pop 阶段采用目标页面节点作为飞跃物 |
+| transition-on-gesture | boolean | false | Web x / 微信小程序 x / Android x / iOS(VDOM) 4.51 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 手势返回时是否进行动画 |
+
+### 指定飞跃物
+
+开发者可以指定选定源页面或目标页的 `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` 组件
+
+#### pop 阶段
+
++ 通过 uni.navigateBack 由 `B` 返回 `A`，此时 `B` 为源页面 (from 页)， `A` 为目标页（to 页）
++ 默认采用 `A `页的 `share-element` 组件，设置属性 shuttle-on-pop=from 可切换成 `B` 页的 `share-element` 组件
+
+#### 注意事项
+
++ 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 属性值，需要一致并且唯一，这样两个共享元素则会建立共享关系，切页动画时则会触发共享元素过度动画效果。
+
+### 子组件 @children-tags
+支持所有组件
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/share-element/share-element.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/share-element/share-element.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+```uvue
+<template>
+  <page-head title="share-element"></page-head>
+  <page-intro content="本页演示 share-element 共享元素组件：点击图片打开详情页时的转场共享效果；下方可配置过渡手势、easing、shuttle-on-push/pop 等。"></page-intro>
+  <view class="main">
+    <share-element class="share-element" share-key="left" :shuttle-on-pop="shuttleOnPopType"
+      :transition-on-gesture="transitionOnGesture" :shuttle-on-push="shuttleOnPushType"  :easing-function="easingFunctionType" @tap="openPage()">
+      <image style="width: 100px;height: 150px;"
+        src="https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-1.jpg">
+      </image>
+    </share-element>
+  </view>
+  <button type="primary" @click="openPage" class="button">
+    打开share-element页面
+  </button>
+
+  <scroll-view style="flex: 1">
+    <view class="content">
+      <boolean-data :defaultValue="transitionOnGesture" title="transition-on-gesture= true(仅iOS生效)"
+        @change="changeTransitionOnGesture"></boolean-data>
+
+      <text class="uni-common-mt choose-property-title">easing-function:</text>
+      <radio-group class="choose-property-type-radio-group" @change="handleEasingFunction">
+        <view class="ml-10 uni-common-mt" v-for="item in easingFunctionTypeList" :key="item">
+          <radio :value="item" :checked="easingFunctionType == item" />
+          <text>{{ item }}</text>
+        </view>
+      </radio-group>
+
+      <text class="uni-common-mt choose-property-title">shuttle-on-push(仅iOS生效):</text>
+      <radio-group class="choose-property-type-radio-group" @change="handleShuttleOnPushType">
+        <view class="ml-10 uni-common-mt" v-for="item in shuttleOnTypeList" :key="item">
+          <radio :value="item" :checked="shuttleOnPushType == item" />
+          <text>{{ item }}</text>
+        </view>
+      </radio-group>
+
+      <text class="uni-common-mt choose-property-title">shuttle-on-pop(仅iOS生效):</text>
+      <radio-group class="choose-property-type-radio-group" @change="handleShuttleOnPopType">
+        <view class="ml-10 uni-common-mt" v-for="item in shuttleOnTypeList" :key="item">
+          <radio :value="item" :checked="shuttleOnPopType == item" />
+          <text>{{ item }}</text>
+        </view>
+      </radio-group>
+
+      <text class="uni-common-mt choose-property-title">animationType(页面动画降级):</text>
+      <radio-group class="choose-property-type-radio-group" @change="handleOpenAnimationType">
+        <view class="ml-10 uni-common-mt" v-for="item in openAnimationTypeList" :key="item">
+          <radio :value="item" :checked="openAnimationType == item" />
+          <text>{{ item }}</text>
+        </view>
+      </radio-group>
+    </view>
+  </scroll-view>
+  <button  @click="gotoShareElementWithSwiper" class="button">
+    打开share-element-with-swiper页面
+  </button>
+  <view style="height: 80px;"></view>
+  <share-element class="bottomWrap" share-key="bottom" @tap="openPage()" transitionOnGesture=true>
+    <view class="bottom">
+      <text style="color: white;">share-element(底部固定)</text>
+    </view>
+  </share-element>
+</template>
+
+
+<style>
+  .ml-10 {
+    margin-left: 10px;
+  }
+
+  .choose-property-title {
+    font-weight: bold;
+  }
+
+  .choose-property-type-radio-group {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .bottomWrap {
+    width: 100%;
+    bottom: 0px;
+    height: 80px;
+    position: fixed;
+  }
+
+  .bottom {
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background-color: #007aff;
+  }
+
+  .main {
+    padding: 5px 0;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.share-element)
+- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=share-element&doc_type=miniprogram)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=share-element&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=share-element&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=share-element&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=share-element&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=share-element)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=share-element&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/slider.md

@@ -0,0 +1,232 @@
+::: sourceCode
+## slider
+
+> 组件类型：UniSliderElement 
+
+ 滑动选择器
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| name | string |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |
+| disabled | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否禁用 |
+| min | number | 0 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | slider 最小值 |
+| max | number | 100 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | slider 最大值 |
+| step | number | 1 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | slider 步长，取值必须大于 0，并且可被(max - min)整除 |
+| value | number | 0 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | slider 当前取值 |
+| activeBackgroundColor | string(string.ColorString) | "#007aff" | Web 4.18 / 微信小程序 x / Android 4.18 / iOS 4.18 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | slider 滑块左侧已选择部分的线条颜色 (vapor 模式请使用 track-active-class) |
+| ~~activeColor~~ | string(string.ColorString) | "#007aff" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | slider 滑块左侧已选择部分的线条颜色 |
+| backgroundColor | string(string.ColorString) | "#e9e9e9" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | slider 背景条的颜色 (vapor 模式请使用 track-class) |
+| block-size | number | 28 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | slider 滑块的大小，取值范围为 12 - 28 (vapor 模式请使用 thumb-class) |
+| ~~block-color~~ | string(string.ColorString) | "#ffffff" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 滑块颜色 (使用foreColor替代) |
+| foreColor | string(string.ColorString) |   | Web 4.18 / 微信小程序 x / Android 4.18 / iOS 4.18 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | slider 的滑块背景颜色 (vapor 模式请使用 thumb-class) |
+| show-value | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否显示当前 value |
+| color | color |   | Web - / 微信小程序 4.41 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | *(color)*<br/>背景条的颜色（请使用 backgroundColor） |
+| selected-color | color |   | Web - / 微信小程序 4.41 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | *(color)*<br/>已选择的颜色（请使用 activeColor） |
+| track-class | string(string.ClassString) |   | Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(Vapor) 5.0（部分支持，见上） | slider 背景条样式类名 |
+| track-active-class | string(string.ClassString) |   | Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(Vapor) 5.0（部分支持，见上） | slider 滑块左侧已选择部分的线条样式类名 |
+| thumb-class | string(string.ClassString) |   | Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(Vapor) 5.0（部分支持，见上） | slider 滑块样式类名 |
+| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 完成一次拖动后触发的事件，event.detail = {value: value} |
+| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 拖动过程中触发的事件，event.detail = {value: value} |
+
+### 事件
+#### UniSliderChangeEvent
+
+```mermaid
+graph LR
+  
+UniSliderChangeEvent -- Extends --> UniCustomEvent&ltUniSliderChangeEventDetail&gt
+  style UniCustomEvent&ltUniSliderChangeEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniSliderChangeEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniSliderChangeEventDetail
+
+###### UniSliderChangeEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| value | number | 是 |
+
+## 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>
+    
+    
+    <slider :min="0" :max="10.5" :step="1" :show-value="true" />
+  </view>
+</template>
+```
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/slider/slider.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/slider/slider.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/slider/slider
+
+>示例
+```vue
+
+
+<template>
+  <view class="main">
+    <slider :disabled="data.disabled_boolean" :min="data.min_input" :max="data.max_input" :step="data.step_input" :value="data.value_input"
+      :activeColor="data.activeColor_input" :backgroundColor="data.backgroundColor_input" :block-size="data.block_size_input"
+      :block-color="data.block_color_input" :show-value="data.show_value_boolean" :valueColor="data.valueColor" @click="slider_click"
+      @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
+      @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
+      @changing="slider_changing" style="width: 90%;margin-left: 10px;"></slider>
+  </view>
+
+  <scroll-view style="flex: 1">
+    <view class="content">
+      <page-head title="组件属性"></page-head>
+      <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+      <input-data defaultValue="0" title="最小值(min)" type="number" @confirm="confirm_min_input"></input-data>
+      <input-data defaultValue="100" title="最大值(max)" type="number" @confirm="confirm_max_input"></input-data>
+      <input-data defaultValue="1" title="步长(step)，取值必须大于 0，并且可被(max - min)整除" type="number"
+        @confirm="confirm_step_input"></input-data>
+      <input-data defaultValue="0" title="当前取值(value)" type="number" @confirm="confirm_value_input"></input-data>
+      
+      <input-data defaultValue="#007aff" title="滑块左侧已选择部分的线条颜色(active-color)" type="text"
+        @confirm="confirm_activeColor_input"></input-data>
+      <input-data defaultValue="#e9e9e9" title="背景条的颜色(background-color)" type="text"
+        @confirm="confirm_backgroundColor_input"></input-data>
+      <input-data defaultValue="28" title="滑块的大小(block-size)，取值范围为 12 - 28" type="number"
+        @confirm="confirm_block_size_input"></input-data>
+      <input-data defaultValue="#ffffff" title="滑块颜色(block-color)" type="text"
+        @confirm="confirm_block_color_input"></input-data>
+      <input-data defaultValue="#888888" title="Value颜色(value-color)" type="text"
+        @confirm="confirm_value_color_input"></input-data>
+      
+    </view>
+
+    <view class="uni-padding-wrap">
+      <page-head title="默认及使用"></page-head>
+      <view class="uni-title">显示当前value</view>
+      <view>
+        <slider style="padding: 5px 0;margin-left: 10px;" @change="sliderChange" :value="50" :show-value="true" />
+      </view>
+
+      <view class="uni-title">设置步进:step=10跳动</view>
+      <view>
+        <view class="uni-row">
+          <text>0</text>
+          <text class="m-l-a">100</text>
+        </view>
+        <slider style="padding: 5px 0;margin-left: 10px;" @change="sliderChange" :value="60" :step="10" />
+      </view>
+
+      <view class="uni-title">浮点步进:step=0.01跳动</view>
+      <view>
+        <slider style="padding: 5px 0;margin-left: 10px" :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />
+      </view>
+
+      <view class="uni-title">设置最小/最大值</view>
+      <view>
+        <slider style="padding: 5px 0;margin-left: 10px" @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
+      </view>
+
+      <view class="uni-title">不同颜色和大小的滑块</view>
+      <view>
+        
+        <slider style="padding: 5px 0;margin-left: 10px" id="slider-custom-color-and-size" @change="sliderChange" :value="data.sliderValue"
+          :backgroundColor="data.sliderBackgroundColor" :activeColor="data.sliderActiveColor"
+          :activeBackgroundColor="data.sliderActiveColor" :blockColor="data.sliderBlockColor" :foreColor="data.sliderBlockColor"
+          :block-size="data.sliderBlockSize"
+          track-class="custom-track" track-active-class="custom-track-active" thumb-class="custom-thumb"/>
+      </view>
+      <view class="uni-title">暗黑模式</view>
+      <view>
+        <slider style="padding: 5px 0;margin-left: 10px" :show-value="true" backgroundColor="rgba(32,32,32,0.5)" valueColor="#555" track-class="dark-track" thumb-class="dark-thumb"/>
+      </view>
+
+      
+        <navigator class="uni-common-mb" url="/pages/template/slider-100/slider-100">
+          <button>组件性能测试</button>
+        </navigator>
+      
+
+      <navigator class="uni-common-mb" url="./slider-in-swiper">
+        <button>slider in swiper</button>
+      </navigator>
+
+      <navigator class="uni-common-mb" url="./slider-maxValue">
+        <button>slider maxValue</button>
+      </navigator>
+    </view>
+  </scroll-view>
+</template>
+
+<style>
+  .main {
+    padding: 5px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .m-l-a {
+    margin-left: auto;
+  }
+
+  /* 自定义样式示例 */
+  .custom-track {
+    background-color: #000000;
+  }
+
+  .custom-track-active {
+    background-color: #FFCC33;
+  }
+
+  .custom-thumb {
+    width: 20px;
+    height: 20px;
+    background-color: #8A6DE9;
+    border-radius: 10px;
+  }
+
+  /* 暗黑模式样式 */
+  .dark-track {
+    background-color: rgba(32, 32, 32, 0.5);
+  }
+
+  .dark-thumb {
+    background-color: #555;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.slider)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/slider.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=slider&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=slider&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=slider&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=slider&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=slider)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=slider&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/snapshot.md

@@ -0,0 +1,30 @@
+::: sourceCode
+## snapshot
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| mode | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>渲染模式 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| view | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 以真实节点渲染。 |
+| picture | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 对子节点生成的内容截图渲染。 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.snapshot)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/snapshot.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=snapshot&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=snapshot&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=snapshot&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=snapshot&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=snapshot)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=snapshot&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/span.md

@@ -0,0 +1,21 @@
+::: sourceCode
+## span
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.span)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/span.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=span&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=span&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=span&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=span&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=span)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=span&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/sticky-header.md

@@ -0,0 +1,138 @@
+::: sourceCode
+## sticky-header
+
+> 组件类型：UniStickyHeaderElement 
+
+ 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| 4.02 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 3.93 | 4.11 | 4.71 | 5.08 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| padding | Array\<number> | \[0,0,0,0\] | Web 4.02 / 微信小程序 x / Android(VDOM) 3.98 / Android(Vapor) x / iOS(VDOM) 4.11 / iOS(Vapor) x / HarmonyOS x（部分支持，见上） | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距  |
+
+### 使用场景
+
+父元素滚动过程中，实现某个子元素固定到父元素顶部的需求
+
+需求其实就是元素吸顶。可将需要吸顶元素放入sticky-header组件中，sticky-header组件作为父元素的子元素，放到吸顶元素原来的位置即可。
+
+**示例：**
+
+```html
+<list-view id="list-view" style="flex: 1; background-color: #f5f5f5;">
+  <sticky-header>
+    
+    <text style="padding: 20px; background-color: #f5f5f5;">向上滑动页面，体验sticky-header吸顶效果。</text>
+  </sticky-header>
+  <list-item v-for="index in 20" :key="index" style="padding: 15px; margin: 5px 0;background-color: #fff;border-radius: 5px;">
+    <text class="text">itme-content-{{index}}</text>
+  </list-item>
+</list-view>
+```
+
+#### 注意事项
+
++ 同一元素下不能存在多 `sticky-header` 组件，使用多个 `sticky-header` 组件需分别放到 `sticky-section` 中
++ `sticky-header` 组件，不支持设置css样式，不要通过 class 和 style 设置样式
++ 鸿蒙平台暂不支持 `padding` 属性，可通过设置子元素样式来实现类似效果
++ 鸿蒙平台 `sticky-header` 组件只能作为 `sticky-section` 的子元素使用
++ 鸿蒙平台API版本低于17的设备不支持 `sticky-header` 组件，可在滚动容器里自行监听滚动，设置某个区域的top为固定值来实现吸顶效果，参考hello uni-app x的模板->[scroll-view自定义滚动吸顶示例](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/template/scroll-view-sticky-section/scroll-view-sticky-section.uvue)
++ 蒸汽模式 sticky-header必须是sticky-section内首个元素
++ 蒸汽模式 每个sticky-section下仅支持一个sticky-header
+
+### 子组件 @children-tags
+支持所有组件
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/sticky-header/sticky-header.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/sticky-header/sticky-header.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-header/sticky-header
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-header/sticky-header
+
+>示例
+```vue
+<template>
+  <list-view :scroll-y="true" class="page uni-theme-root" bounces="false" show-scrollbar=false :scroll-top="data.scroll_top_input"
+    :refresher-enabled="data.refresher_enabled_boolean" :refresher-triggered="data.refresher_triggered_boolean"
+    @refresherrefresh="list_view_refresherrefresh">
+    <list-item type=1>
+      <swiper indicator-dots="true" circular="true" style="height: 240px;">
+        <swiper-item v-for="i in 3" :item-id="i + ''">
+          <image src="/static/shuijiao.jpg" style="height: 240px; width: 100%;"></image>
+          <text style="position: absolute;">{{i}}</text>
+        </swiper-item>
+      </swiper>
+    </list-item>
+    <list-item class="content-item" type=2>
+      <text class="text">向上滑动页面，体验sticky-header吸顶效果。</text>
+    </list-item>
+    <sticky-section>
+      <sticky-header>
+        <scroll-view class="sticky-tab-bar" direction="horizontal"
+          :show-scrollbar="false">
+          <view style="align-self: flex-start; flex-direction: row;">
+            <text ref="swipertab" class="sift-item" v-for="(name,index) in data.sift_item" @click="clickTH(index)">
+              {{name}}
+            </text>
+          </view>
+        </scroll-view>
+      </sticky-header>
+
+      <list-item v-for="(item,index) in data.list_item" :key="index" class="content-item" type=3>
+        <text class="content-item-text">{{item}}</text>
+      </list-item>
+    </sticky-section>
+  </list-view>
+</template>
+
+
+
+<style>
+  .page {
+    flex: 1;
+  }
+
+  .sticky-tab-bar {
+    background-color: var(--background-color, #f5f5f5);
+    flex-direction: row;
+  }
+
+  .content-item {
+    padding-bottom: 10px;
+  }
+
+  .content-item-text {
+    font-size: 14px;
+    color: var(--text-color, #666666);
+    line-height: 20px;
+    padding: 15px;
+    background-color: var(--list-background-color, #ffffff);
+  }
+
+  .sift-item {
+    color: var(--text-color, #555555);
+    font-size: 16px;
+    padding: 12px 15px;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-header)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-header&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-header&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-header&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-header&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-header)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-header&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)