tmui-cli 2.0.2 → 2.0.4

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

@@ -0,0 +1,152 @@
+::: sourceCode
+## sticky-section
+
+> 组件类型：UniStickySectionElement 
+
+ 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！
+
+### 兼容性 
+| 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.98 | 4.11 | 4.71 | 5.08 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| push-pinned-header | boolean | true | Web x / 微信小程序 x / Android 3.98 / iOS(VDOM) 4.11 / iOS(Vapor) 5.21 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.21（部分支持，见上） | sticky-section元素重叠时是否继续上推 |
+| preload | boolean | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.21 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.21（部分支持，见上） | sticky-section即使在视图外也预加载内容 |
+| 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-section使用场景
+
+父元素滚动过程中，多个元素有固定到父元素顶部的需求。
+
+父元素中多个元素吸顶需要使用sticky-section组件。sticky-section组件作为sticky-header组件的父容器。sticky-section组件会控制子元素的滚动吸顶业务。sticky-section组件之间可通过push-pinned-header属性控制吸顶重叠时是否上推。
+
+**示例：**
+
+```html
+<list-view id="list-view" style="flex: 1; background-color: #f5f5f5;">
+  <sticky-section v-for="sectionId in 3" :id="sectionId" push-pinned-header=false :preload="true">
+    <sticky-header>
+      <text style="padding: 20px; background-color: #f5f5f5;">sticky-header吸顶--{{sectionId}}</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>
+  </sticky-section>
+</list-view>
+```
+
+#### preload属性说明
+
+> 仅app平台蒸汽模式支持
+
+preload属性用于控制sticky-section组件的预加载行为，默认值为false。设置为true时，sticky-section组件会在滚动到该section之前就进行渲染，从而避免或减少滚动到该section时出现空白或闪烁的情况。例如在index-bar这种直接跳转到某个section的场景下，设置preload为true可以提升用户体验。参考：[uni-ui-x index-bar示例](https://gitcode.com/dcloud/uni-ui-x/blob/dev/pages/uni-ui/index-bar/index-bar.uvue)
+
+#### 注意事项  
+
++ Android平台、iOS平台sticky-section组件支持存放多个sticky-header子组件，多个sticky-header滚动吸顶时，后一个sticky-header会停靠在前一个sticky-header的末尾处, 仅限于同一个sticky-section父容器。多个sticky-section吸顶停靠通过push-pinned-header控制。  
++ `sticky-section` 组件，不支持设置css样式，不要通过 class 和 style 设置样式  
++ Android平台 `sticky-section` 组件作为 list-view 的子元素时需要注意，sticky-section子元素仅支持sticky-header、list-item，其他元素无法正常显示
++ 鸿蒙平台暂不支持 `padding` 属性，可通过设置子元素样式来实现类似效果  
++ 蒸汽模式 sticky-section内的list-item必须使用v-for、不能使用v-if，且此v-for必须有key
+
+### 子组件 @children-tags
+支持所有组件
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/sticky-section/sticky-section.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/sticky-section/sticky-section.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-section/sticky-section
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-section/sticky-section
+
+>示例
+```vue
+<template>
+  <page-head title="sticky-section"></page-head>
+  <list-view id="list-view" ref="listViewRef" show-scrollbar=false class="page uni-theme-root" :scroll-into-view="pageData.scrollIntoView"
+    @scroll="onScroll" @scrollend="onScrollEnd" bounces="false" refresher-enabled="true" :refresher-triggered="pageData.refresherTriggered" @refresherrefresh="onRefresherrefresh">
+    <list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type=20>
+      <button @click="gotoStickyHeader('C')" size="mini">跳转到id为C的sticky-header位置上</button>
+    </list-item>
+    <list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type=20>
+      <button @click="appendSectionItem(0)" size="mini">第一组 section 新增5条内容</button>
+    </list-item>
+    <list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type=20>
+      <button @click="deleteSection()" size="mini">删除第一组 section</button>
+    </list-item>
+    <sticky-section class="content-section" ref="sectionRefs" style="align-items: stretch; align-content: stretch;" v-for="(section) in pageData.sectionArray" :key="section.name"
+      
+      :padding="pageData.sectionPadding"
+      
+      
+      :preload="true"
+      
+      :push-pinned-header="true">
+      <sticky-header :id="section.name">
+        <text class="sticky-header-text">{{section.name}}</text>
+      </sticky-header>
+      <list-item v-for="(list) in section.list" :key="list.text" :name="list.text" class="content-item" :type=10>
+        <text class="content-item-text">{{list.text}}</text>
+      </list-item>
+    </sticky-section>
+    <list-item v-if="pageData.sectionArray.length > 0" style="padding: 10px; margin: 5px 0;align-items: center;" :type=30>
+      
+      <button @click="toTop" size="mini">回到顶部</button>
+    </list-item>
+    <list-item>
+      <navigator url="/pages/component/sticky-section/sticky-section-push-pinned-header">
+        <button>push-pinned-header属性测试</button>
+      </navigator>
+    </list-item>
+  </list-view>
+</template>
+
+
+
+<style>
+  .page {
+    flex: 1;
+  }
+
+  .sticky-header-text {
+    font-size: 16px;
+    padding: 8px;
+    color: var(--active-color, #959595);
+    background-color: var(--background-color, #f5f5f5);
+  }
+
+  .content-section {
+    /* #ifdef APP && VUE3-VAPOR */
+    /* 蒸汽模式sticky-section支持padding样式，不支持padding属性 */
+    padding: 0px 10px 0px 10px;
+    /* #endif */
+  }
+
+  .content-item {
+    padding-bottom: 10px;
+  }
+
+  .content-item-text {
+    padding: 15px;
+    color: var(--text-color, #333333);
+    background-color: var(--list-background-color, #ffffff);
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-section)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-section&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-section&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-section&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-section&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-section)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-section&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.md

@@ -0,0 +1,6 @@
+layout: SimpleLayout
+
+文档已迁移至：
+
+- [sticky-header](sticky-header.md)
+- [sticky-section](sticky-section.md)

package/data/uniappx/component/store-home.md

@@ -0,0 +1,26 @@
+::: sourceCode
+## store-home
+
+### 兼容性 
+| 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> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| appid | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>小店appid。获取方式：[小店后台](https://store.weixin.qq.com/shop/setting/home) - 店铺管理 - 基础信息 - 账号信息 - 微信小店ID。 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.store-home)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/store-home.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=store-home&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=store-home&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=store-home&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=store-home&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=store-home)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=store-home&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/store-product.md

@@ -0,0 +1,28 @@
+::: sourceCode
+## store-product
+
+### 兼容性 
+| 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> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| appid | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>小店appid。获取方式：[小店后台](https://store.weixin.qq.com/shop/setting/home) - 店铺管理 - 基础信息 - 账号信息 - 微信小店ID。 |
+| product-id | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>商品id。获取小店商品id，可以通过API获取([参考链接](https://developers.weixin.qq.com/doc/store/API/product/get.html))或通过[小店后台](https://store.weixin.qq.com/shop/goods/list) - 商品管理 - 商品列表 - 规格/编码获取。 |
+| product-promotion-link | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>带货商品跟佣信息。若需要商品售卖时使用小店优选联盟带货跟佣功能，可以通过API获取带货商品跟佣信息([参考链接](https://developers.weixin.qq.com/doc/channels/API/windowproduct/get.html))。 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.store-product)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/store-product.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=store-product&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=store-product&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=store-product&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=store-product&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=store-product)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=store-product&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/swiper-item.md

@@ -0,0 +1,3 @@
+layout: SimpleLayout
+
+已迁移至 [swiper](./swiper.md#swiper-item) 章节

package/data/uniappx/component/swiper.md

@@ -0,0 +1,380 @@
+::: sourceCode
+## swiper
+
+> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-swiper
+
+> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-swiper
+
+> 组件类型：UniSwiperElement 
+
+ 滑块视图容器
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| indicator-dots | string \| boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否显示面板指示点 |
+| indicator-color | string(string.ColorString) | "rgba(0, 0, 0, .3)" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 指示点颜色，蒸汽模式推荐使用 indicator-style 定制指示点颜色 |
+| indicator-active-color | string(string.ColorString) | "#000000" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 当前选中的指示点颜色，蒸汽模式推荐使用 indicator-active-style 定制指示点颜色 |
+| active-class | string |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（不支持） | swiper-item 可见时的 class |
+| changing-class | boolean |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（不支持） | acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class |
+| acceleration | boolean |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（不支持） | 当开启时，会根据滑动速度，连续滑动多屏 |
+| disable-programmatic-animation | boolean |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（不支持） | 是否禁用代码变动触发 swiper 切换时使用动画。 |
+| disable-touch | string \| boolean | false | Web 4.0 / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 是否禁止用户 touch 操作 |
+| touchable | boolean |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（不支持） | 是否监听用户的触摸事件 |
+| easing-function | string | "default" | Web x / 微信小程序 4.41 / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS 4.61（部分支持，见上） | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic |
+| 合法值 | 兼容性 |
+| :- |  :-: |
+| default | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS 4.61（部分支持，见上） |
+| linear | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS 4.61（部分支持，见上） |
+| easeInCubic | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） |
+| easeOutCubic | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS 4.61（部分支持，见上） |
+| easeInOutCubic | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） |
+| autoplay | string \| boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否自动切换 |
+| current | number | 0 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 当前所在滑块的 index |
+| current-item-id | string |   | Web 4.0 / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 当前所在滑块的 item-id ，不能与 current 被同时指定 |
+| interval | number | 3000 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 自动切换时间间隔 |
+| duration | number | 500 | Web 4.0 / 微信小程序 4.41 / Android 4.44 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS 4.61（部分支持，见上） | 滑动动画时长（Android平台仅autoplay模式下生效） |
+| circular | string \| boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否采用衔接滑动 |
+| vertical | string \| boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 滑动方向是否为纵向 |
+| rebound | boolean | true | Web x / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 控制是否回弹效果 |
+| previous-margin | string | "0px" | Web x / 微信小程序 4.41 / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS 4.61（部分支持，见上） | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |
+| next-margin | string | "0px" | Web x / 微信小程序 4.41 / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS 4.61（部分支持，见上） | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |
+| display-multiple-items | number |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 同时显示的滑块数量 |
+| auto-height | string \| boolean | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 自动高度。设置为 true 时，swiper 高度会随当前 item 的高度变化而变化。 |
+| disable-bounce | string \| boolean | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 控制是否回弹效果 |
+| indicator-class | string(string.ClassString) |   | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 指示点绑定的 class |
+| indicator-active-class | string(string.ClassString) |   | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 当前选中的指示点绑定的 class |
+| indicator-style | string |   | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 指示点样式 |
+| indicator-active-style | string |   | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 当前选中的指示点样式 |
+| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
+| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |
+| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |
+
+### 事件
+#### UniSwiperChangeEvent
+
+```mermaid
+graph LR
+  
+UniSwiperChangeEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniSwiperChangeEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniSwiperChangeEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| current | number | 是 |   | 发生change事件的滑块下标 |
+| currentItemId | string | 否 | Web √ / 微信小程序 4.41 / Android x / iOS x / HarmonyOS 4.61（部分支持，见上） | 切换结束的 swiper-item 的 item-id 属性值 |
+| source | string | 是 |   | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |
+
+#### UniSwiperTransitionEvent
+
+```mermaid
+graph LR
+  
+UniSwiperTransitionEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniSwiperTransitionEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniSwiperTransitionEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| dx | number | 是 | 横向偏移量，单位是逻辑像素px |
+| dy | number | 是 | 纵向偏移量，单位是逻辑像素px |
+
+#### UniSwiperAnimationFinishEvent
+
+```mermaid
+graph LR
+  
+UniSwiperAnimationFinishEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniSwiperAnimationFinishEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniSwiperAnimationFinishEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| current | number | 是 |   | 发生动画结束事件的滑块下标 |
+| currentItemId | string | 否 | Web √ / 微信小程序 4.41 / Android x / iOS x / HarmonyOS 4.61（部分支持，见上） | 动画结束的 swiper-item 的 item-id 属性值 |
+| source | string | 是 |   | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |
+
+### 子组件 @children-tags
+| 子组件 | 兼容性 |
+| :- | :- |
+| [swiper-item](swiper-item.md) | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/swiper/swiper.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/swiper/swiper.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/swiper/swiper
+
+>示例
+```vue
+<template>
+  
+  <scroll-view class="page-scroll-view uni-theme-root">
+  
+    <view class="swiper-page uni-common-mb uni-common-pb uni-theme-root">
+      <page-head title="swiper,可滑动视图"></page-head>
+      <view>
+        
+        <swiper id="swiper-view" class="swiper" :vertical="data.verticalSelect" :indicator-dots="data.dotsSelect"
+          :autoplay="data.autoplaySelect"
+          
+          :disable-bounce="data.disableBounceSelect"
+          
+          
+          :bounces="!data.disableBounceSelect"
+          
+          :interval="data.intervalSelect" :circular="data.circularSelect"
+          :duration="data.durationSelect" :indicator-color="data.indicatorColor" :indicator-active-color="data.indicatorColorActive"
+          :disable-touch="data.disableTouchSelect" :current="data.currentVal" :current-item-id="data.currentItemIdVal"
+          @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish"
+          @touchstart="swipertouchStart">
+          <swiper-item item-id="A">
+            <view class="swiper-item uni-bg-red"><text class="swiper-item-Text" @touchstart="viewtouchStart">A</text>
+            </view>
+          </swiper-item>
+          <swiper-item item-id="B">
+            <view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
+          </swiper-item>
+          <swiper-item item-id="C">
+            <view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
+          </swiper-item>
+        </swiper>
+      </view>
+      <view class="uni-list">
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">显示面板指示点</text></view>
+          <switch :checked="data.dotsSelect" @change="dotsChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">定制指示器颜色</text></view>
+          <switch :checked="data.indicatorColorSelect"
+            
+            :disabled="true"
+            
+            @change="indicatorColorChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">禁止 touch 操作</text></view>
+          <switch :checked="data.disableTouchSelect" @change="disableTouchChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">是否自动切换</text></view>
+          <switch :checked="data.autoplaySelect" @change="autoplayChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">是否衔接滑动</text></view>
+          <switch :checked="data.circularSelect" @change="circularChange" />
+        </view>
+        <view class="uni-title uni-list-cell-padding"><text class="uni-theme-text">间隔时间(毫秒)</text></view>
+        <view class="uni-padding-wrap">
+          <slider @change="sliderChange" :value="2000" :min="500" :max="5000" :show-value="true" />
+        </view>
+        <view class="uni-title uni-list-cell-padding"><text class="uni-theme-text">动画时长(毫秒)</text></view>
+        <view class="uni-padding-wrap">
+          <slider @change="durationSliderChange" :value="500" :min="50" :max="2000" :show-value="true" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">是否纵向滑动</text></view>
+          <switch :checked="data.verticalSelect" @change="verticalChange" />
+        </view>
+        
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">是否禁用回弹效果</text></view>
+          
+          <switch :checked="data.disableBounceSelect" @change="disableBounceSelectChange" />
+        </view>
+        
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">指定current为最后一个元素</text></view>
+          <switch :checked="data.currentSelect" @change="currentChange" />
+        </view>
+        
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">指定current-item-id为最后一个元素</text></view>
+          <switch :checked="data.currentItemIdSelect" @change="currentItemIdChange" />
+        </view>
+        
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">打印 swiperChange 日志</text></view>
+          <switch :checked="data.swiperChangeSelect" @change="swiperChangeChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">1打印 swiperTransition 日志</text></view>
+          <switch :checked="data.swiperTransitionSelect" @change="swiperTransitionChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">打印 swiperAnimationfinish 日志</text></view>
+          <switch :checked="data.swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
+        </view>
+
+        <view class="uni-list-cell-padding"><text class="uni-theme-text">测试 swiper 默认行为</text></view>
+        <swiper class="swiper" :autoplay="data.autoplayForDefault" :circular="data.circularForDefault">
+          <swiper-item item-id="A">
+            <view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
+          </swiper-item>
+          <swiper-item item-id="B">
+            <view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
+          </swiper-item>
+          <swiper-item item-id="C">
+            <view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
+          </swiper-item>
+        </swiper>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">是否自动切换</text></view>
+          <switch :checked="data.autoplayForDefault" @change="() => {data.autoplayForDefault = !data.autoplayForDefault}" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db"><text class="uni-theme-text">是否衔接滑动</text></view>
+          <switch :checked="data.circularForDefault" @change="() => {data.circularForDefault = !data.circularForDefault}" />
+        </view>
+        
+        <navigator url="/pages/component/swiper/swiper-list-view">
+          <button type="primary">
+            swiper 嵌套 list-view 测试
+          </button>
+        </navigator>
+        <navigator url="/pages/component/swiper/swiper-anim" style="margin-top: 10px;">
+        	<button type="primary">
+        		swiper 动画测试
+        	</button>
+        </navigator>
+        
+        
+        <navigator url="/pages/component/swiper/swiper-more" style="margin-top: 10px;">
+        	<button type="primary">
+        		更多 swiper
+        	</button>
+        </navigator>
+        <navigator url="/pages/component/swiper/swiper-in-swiper" style="margin-top: 10px;">
+          <button type="primary">嵌套测试</button>
+        </navigator>
+        
+          <navigator url="/pages/component/swiper/swiper-item-100" style="margin-top: 10px;">
+            <button>组件性能测试</button>
+          </navigator>
+        
+        
+      </view>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+  .swiper {
+    height: 150px;
+  }
+
+  .swiper-item {
+    width: 100%;
+    height: 150px;
+  }
+
+  .swiper-item-Text {
+    width: 100%;
+    text-align: center;
+    line-height: 150px;
+  }
+</style>
+
+```
+
+**平台差异**
+
+- web、小程序、app-harmony 端的swiper-item为绝对定位，无法撑开swiper。所以swiper组件的默认高度为150px。
+- app-android和iOS的swiper目前默认会以内容高度撑开作为其高度。如果要多端拉齐应自行设置swiper的style里的高度。后续Android和iOS的swiper也会统一为其他平台的方式。
+
+- 使用 `auto-height` 属性时，`swiper-item` 组件外层容器和 slot 内容之间会增加一层 `view`，这会导致设置在 `swiper-item` 上的布局样式无法直接影响插槽内的元素（比如 `align-items: center`），请注意避免影响布局。
+- 蒸汽模式不再支持 `rebound` 属性，如需控制是否回弹效果，请使用 `disable-bounce` 属性。
+- 蒸汽模式不再支持 `indicator-color` 和 `indicator-active-color` 属性，如需自定义指示点颜色及其他样式，请使用 `indicator-style`、`indicator-class` 和 `indicator-active-style`、`indicator-active-class` 属性。
+- 蒸汽模式新增通过 `<template v-slot:indicator>` 具名插槽自定义指示点，示例代码如下：
+
+```vue
+<template>
+	<swiper :current="current" @change="handleSwiperChange">
+		<swiper-item>
+			<view style="height: 100%; align-items: center; justify-content: center; background-color: #16a085;">
+				<text style="color: white;">Item 1</text>
+			</view>
+		</swiper-item>
+		<swiper-item>
+			<view style="height: 100%; align-items: center; justify-content: center; background-color: #cccccc;">
+				<text style="color: black;">Item 2</text>
+			</view>
+		</swiper-item>
+		<swiper-item>
+			<view style="height: 100%; align-items: center; justify-content: center; background-color: #00cc00;">
+				<text style="color: white;">Item 3</text>
+			</view>
+		</swiper-item>
+		<template v-slot:indicator>
+			<text v-for="(_, index) in 3" class="custom-indicator-text" :class="{ 'active': current === index }">{{index + 1}}</text>
+		</template>
+	</swiper>
+</template>
+
+<style>
+	.custom-indicator-text {
+		margin: 0 5px;
+	}
+
+	.custom-indicator-text.active {
+		font-size: 18px;
+		color: yellow;
+		font-weight: bold;
+	}
+</style>
+```
+
+## swiper-item
+
+> 组件类型：UniSwiperItemElement 
+
+ swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| item-id | string | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 该 swiper-item 的标识符 |
+| skip-hidden-item-layout | boolean | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper-item)
+- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper-item&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper-item&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper-item&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper-item&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper-item)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper-item&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)