tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/waterflow.md

@@ -0,0 +1,407 @@
+::: sourceCode
+## waterflow
+
+> 组件类型：UniWaterFlowElement 
+
+ 瀑布流组件
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| <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.41 | 4.41 | 4.81 | 5.02 |
+
+在App中，waterflow 底层实现与list-view底层实现方式基本一致，仅子组件排列方式存在差异，适用于多元素瀑布流长列表场景，子组件滑动出屏幕会及时回收复用。性能优于 scroll-view
+
+> waterflow 暂时只支持 flow-item 组件为子组件，其他组件不可见
+
+> waterflow 只支持竖向滚动，不支持横向滚动
+
+> 鸿蒙平台api 20及以上版本支持滚动相关事件，api 18及以上版本支持load-more插槽
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| cross-axis-count | number \| string | 2 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 交叉轴元素数量 |
+| main-axis-gap | number \| string | 0 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 主轴方向间隔 |
+| cross-axis-gap | number \| string | 0 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 交叉轴方向间隔 |
+| max-cross-axis-extent | number \| string | 0 | Web x / 微信小程序 x / Android x / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.02（部分支持，见上） | flow-item交叉轴方向最大尺寸 |
+| padding | Array | \[0,0,0,0\] | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS x（部分支持，见上） | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距。蒸汽模式已废弃此属性，推荐使用 css padding 属性 |
+| associative-container | string |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS x（部分支持，见上） | 关联的滚动容器 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| nested-scroll-view | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS x（部分支持，见上） | 嵌套滚动 |
+| bounces | boolean \| string | true | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 控制是否回弹效果 |
+| android-overscroll | boolean \| string | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS x / HarmonyOS x（部分支持，见上） | Android平台是否开启弹簧回弹效果，开启后默认下拉刷新使用圆弧loading样式（推动页面内容），否则默认下拉刷新使用Android系统悬浮圆环样式（不推动页面内容） |
+| android-scrollbar-draggable | boolean \| string | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.26 / iOS x / HarmonyOS x（部分支持，见上） | Android 平台是否允许拖动滚动条以快速定位滚动内容，默认值为 false，当前暂仅支持竖向滚动  |
+| android-refresher-color | string(string.ColorString) |   | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.25 / iOS x / HarmonyOS x（部分支持，见上） | 设置 Android 平台 scroll-view 默认下拉刷新样式的前景颜色，优先级高于 refresher-default-style  |
+| upper-threshold | number | 50 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
+| lower-threshold | number | 50 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
+| scroll-top | number | 0 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 设置竖向滚动条位置 |
+| show-scrollbar | boolean \| string | true | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 控制是否出现滚动条 |
+| scroll-into-view | string(string.IDString) |   | Web x / 微信小程序 x / Android(VDOM) 4.41 / Android(Vapor) 5.25 / iOS(VDOM) 4.41 / iOS(Vapor) 5.25 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.25（部分支持，见上） | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |
+| scroll-with-animation | boolean \| string | false | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |
+| refresher-enabled | boolean \| string | false | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |
+| refresher-threshold | number | 45 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |
+| refresher-max-drag-distance | number |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |
+| refresher-default-style | string | "black" | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 设置下拉刷新默认样式，支持设置 black \| white \| none， none 表示不使用默认样式 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| black | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 深颜色雪花样式 |
+| white | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 浅白色雪花样式 |
+| none | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 不使用默认样式 |
+| refresher-background | string(string.ColorString) | "transparent" | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 设置下拉刷新区域背景颜色，默认透明。Android 平台下，当 android-overscroll=false 时，默认下拉刷新使用悬浮圆环样式，此时背景默认不再透明，而是由 refresher-default-style 决定 |
+| refresher-triggered | boolean \| string | false | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |
+| enable-back-to-top | boolean \| string | false | Web x / 微信小程序 x / Android x / iOS 4.41 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.02（部分支持，见上） | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |
+| custom-nested-scroll | boolean \| string | false | Web x / 微信小程序 x / Android 4.41 / iOS x / HarmonyOS x（部分支持，见上） | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |
+| scroll-left | number |   |   |   |
+| nested-scroll-child | string |   |   |   |
+| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 下拉刷新控件被下拉 |
+| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 下拉刷新被触发 |
+| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 下拉刷新被复位 |
+| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 下拉刷新被中止 |
+| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 滚动到顶部/左边，会触发 scrolltoupper 事件 |
+| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 滚动到底部/右边，会触发 scrolltolower 事件 |
+| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
+| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void |   | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
+
+### 事件
+#### UniRefresherEvent
+
+```mermaid
+graph LR
+  
+UniRefresherEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniRefresherEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniRefresherEventDetail** | 是 |
+| 名称 | 类型 | 必备 |
+| :- | :- | :- |
+| dy | number | 是 |
+
+#### UniScrollToUpperEvent
+
+```mermaid
+graph LR
+  
+UniScrollToUpperEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniScrollToUpperEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniScrollToUpperEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| direction | string | 是 | 滚动方向 top 或 left |
+
+#### UniScrollToLowerEvent
+
+```mermaid
+graph LR
+  
+UniScrollToLowerEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniScrollToLowerEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniScrollToLowerEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| direction | string | 是 | 滚动方向 bottom 或 right |
+
+#### UniScrollEvent
+
+```mermaid
+graph LR
+  
+UniScrollEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniScrollEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniScrollEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| scrollTop | number | 是 | 竖向滚动的距离 |
+| scrollLeft | number | 是 | 横向滚动的距离 |
+| scrollHeight | number | 是 | 滚动区域的高度 |
+| scrollWidth | number | 是 | 滚动区域的宽度 |
+| deltaY | number | 是 | 当次滚动事件竖向滚动量 |
+| deltaX | number | 是 | 当次滚动事件横向滚动量 |
+
+### 自定义下拉刷新样式
+
+waterflow组件有默认的下拉刷新样式，使用方式与scroll-view的自定义下拉刷新相同。[详见](./scroll-view.md#customrefresh)
+
+uni-ui x 提供了开源的自定义下拉刷新组件，可以体验：[uni-refresh-box](https://doc.dcloud.net.cn/uni-app-x/component/uni-ui-x/uni-refresh-box.html)
+
+1. 设置`refresher-default-style`属性为 none 不使用默认样式
+2. 设置 flow-item 定义自定义下拉刷新元素并声明为 `slot="refresher"`，需要设置刷新元素宽高信息否则可能无法正常显示！
+   ```html
+   <template>
+   	<waterflow refresher-default-style="none" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
+   			 @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
+   			 @refresherrestore="onRefresherrestore" style="flex:1" >
+
+   		<flow-item v-for="i in 10" class="content-item" type=1>
+   			<text class="text">item-{{i}}</text>
+   		</flow-item>
+
+   		
+   		<flow-item slot="refresher" class="refresh-box" type=2>
+   			<text class="tip-text">{{text[state]}}</text>
+   		</flow-item>
+   	</waterflow>
+   </template>
+   ```
+3. 通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素！实现预期效果
+
+**注意：**
++ 目前自定义下拉刷新元素不支持放在waterflow的首个子元素位置上。可能无法正常显示
+
+### 加载更多(load-more)
+
+由于 waterflow 组件是多列的，单个 flow-item 组件无法占用一整行，加载更多展示不太友好，所以我们提供了slot="load-more"属性配置，waterflow 组件会特殊处理最后一个 flow-item 子组件，如果配置了slot="load-more"则显示一整行
+
+   ```html
+   <template>
+   	<waterflow style="flex:1" >
+
+   		<flow-item v-for="i in 10" class="content-item" type=1>
+   			<text class="text">item-{{i}}</text>
+   		</flow-item>
+
+   		<flow-item slot="load-more" id="loadmore" type=3 class="load-more-box">
+            <text>加载更多</text>
+        </flow-item>
+   	</waterflow>
+   </template>
+   ```
+
+**注意：**
++ slot="load-more"仅对 waterflow 最后一个 flow-item 子组件生效
+
+### 嵌套模式
+
+scroll-view开启嵌套模式后，waterflow 可作为内层滚动视图与外层 scroll-view 实现嵌套滚动
+
+设置内层 waterflow 的 `associative-container` 属性为 "nested-scroll-view"，开启内层 waterflow 支持与外层 scroll-view 嵌套滚动
+
+### 子组件 @children-tags
+| 子组件 | 兼容性 |
+| :- | :- |
+| [flow-item](flow-item.md) | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/waterflow/waterflow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/waterflow/waterflow.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+
+::: preview
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/waterflow/waterflow
+```uvue
+
+
+<template>
+  <page-intro content="本页演示 waterflow 瀑布流组件：列数、间距、下拉刷新与加载更多；下方可调节滚动与 refresher 等属性，可跳转固定高度示例。"></page-intro>
+  <view class="main">
+    <waterflow :cross-axis-count="data.cross_axis_count" :main-axis-gap="data.main_axis_gap" :cross-axis-gap="data.cross_axis_gap"
+      :bounces="data.bounces_boolean" :upper-threshold="data.upper_threshold_input" :lower-threshold="data.lower_threshold_input"
+      :scroll-top="data.scroll_top_input" :scroll-left="data.scroll_left_input" :show-scrollbar="data.show_scrollbar_boolean"
+      :scroll-into-view="data.scrollIntoView" :scroll-with-animation="data.scroll_with_animation_boolean"
+      :refresher-enabled="data.refresher_enabled_boolean" :refresher-background="data.refresher_background_input"
+      :refresher-triggered="data.refresher_triggered_boolean" :refresher-default-style="data.refresher_default_style_input"
+      @click="waterflow_click" @touchstart="waterflow_touchstart" @touchmove="waterflow_touchmove"
+      @touchcancel="waterflow_touchcancel" @touchend="waterflow_touchend" @tap="waterflow_tap"
+      @longpress="waterflow_longpress" @refresherpulling="waterflow_refresherpulling"
+      @refresherrefresh="waterflow_refresherrefresh" @refresherrestore="waterflow_refresherrestore"
+      @refresherabort="waterflow_refresherabort" @scrolltoupper="waterflow_scrolltoupper" ref="waterflowRef"
+      @scrolltolower="waterflow_scrolltolower" @scroll="waterflow_scroll" @scrollend="waterflow_scrollend"
+      style="width:100%; " id="waterflow" :padding="data.waterflowPadding">
+
+      <flow-item v-for="(item, index) in data.scrollData" :key="index" :id="item.text" @click="flow_item_click"
+        :style="{'height' : item.height}" @touchstart="flow_item_touchstart" @touchmove="flow_item_touchmove"
+        @touchcancel="flow_item_touchcancel" @touchend="flow_item_touchend" @tap="flow_item_tap"
+        @longpress="flow_item_longpress" class="flow-item" type=1>
+        <text>{{item.text}}</text>
+      </flow-item>
+
+      <flow-item slot="refresher" id="refresher" type=2 class="refresh-box">
+        <text class="tip-text">{{data.text[data.state]}}</text>
+      </flow-item>
+      <flow-item v-show="data.hasMore" slot="load-more" id="loadmore" type=6 class="load-more-box" @click="load_more_click">
+        <text>加载更多</text>
+      </flow-item>
+    </waterflow>
+  </view>
+
+  <scroll-view style="flex:1" direction="vertical">
+    <view class="content">
+      <boolean-data :defaultValue="false" title="设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发"
+        @change="change_refresher_triggered_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="开启下拉刷新" @change="change_refresher_enabled_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="开启自定义样式" @change="change_refresher_style_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画"
+        @change="change_scroll_with_animation_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="控制是否出现滚动条" @change="change_show_scrollbar_boolean"></boolean-data>
+      <boolean-data :defaultValue="true" title="控制是否回弹效果" @change="change_bounces_boolean"></boolean-data>
+      <boolean-data :defaultValue="true" title="是否显示加载更多" @change="change_load_more_boolean"></boolean-data>
+      <input-data defaultValue="2" title="设置cross-axis-count，触发 scrolltoupper 事件" type="number"
+        @confirm="handleChangeCrossAxisCount"></input-data>
+      <view class="uni-slider uni-list-cell-padding">
+        <text>拖动设置cross-axis-gap</text>
+      </view>
+      <view class="uni-slider uni-list-cell-padding">
+        <slider :max="20" :min="0" :step="1" :value="data.cross_axis_gap" :show-value="true"
+          @change="handleChangeCrossAxisGap" />
+      </view>
+      <view class="uni-slider uni-list-cell-padding">
+        <text>拖动设置main-axis-gap</text>
+      </view>
+      <view class="uni-slider uni-list-cell-padding">
+        <slider :max="20" :min="0" :step="1" :value="data.main_axis_gap" :show-value="true"
+          @change="handleChangeMainAxisGap" />
+      </view>
+      <input-data defaultValue="50" title="距顶部/左边多远时（单位px），触发 scrolltoupper 事件" type="number"
+        @confirm="confirm_upper_threshold_input"></input-data>
+      <input-data defaultValue="50" title="距底部/右边多远时（单位px），触发 scrolltolower 事件" type="number"
+        @confirm="confirm_lower_threshold_input"></input-data>
+      <input-data defaultValue="0" title="设置竖向滚动条位置" type="number" @confirm="confirm_scroll_top_input"></input-data>
+      <input-data defaultValue="#FFF" title="设置下拉刷新区域背景颜色" type="text"
+        @confirm="confirm_refresher_background_input"></input-data>
+      
+      <enum-data :items="data.size_enum" title="通过id位置跳转" @change="item_change_size_enum"></enum-data>
+      
+      <navigator url="/pages/component/waterflow/waterflow-fit-height">
+        <button type="primary" class="button">
+          item高度自适应
+        </button>
+      </navigator>
+    </view>
+
+    <bottom-safe-area />
+  </scroll-view>
+</template>
+
+<style>
+  .main {
+    max-height: 250px;
+    padding: 5px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, .06);
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .flow-item {
+    width: 100%;
+    height: 200px;
+    border: 1px solid #666;
+    background-color: #66ccff;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tip-text {
+    color: #888;
+    font-size: 12px;
+  }
+
+  .refresh-box {
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    height: 45px;
+    width: 100%;
+  }
+
+  .load-more-box {
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    height: 45px;
+    width: 100%;
+    border-style: solid;
+  }
+
+  .button {
+    margin-top: 15px;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.waterflow.waterflow)
+- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=waterflow&doc_type=miniprogram)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=waterflow&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=waterflow&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=waterflow&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=waterflow&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=waterflow)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=waterflow&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)
+
+### App平台
+
+- waterflow的性能优化，与list-view相同，详见[列表性能优化](./list-view.md#performance)
+- waterflow 组件默认高度是计算后瀑布流高度，无法滚动，如需要滚动要设置高度小于瀑布流高度，推荐配置 "flex:1"
+- waterflow 组件在排版完毕UI展示后，如果子组件高度发生变化，则会重新排版，flow-item 组件的UI会出现短暂的错乱和位置位移，建议控制子元素高度固定避免动态修改高度
+	+ 场景一 image组件设置mode=widthFix，加载的网络图片会出现异步图片下载动态修改高度的情况，容易出现上述问题
+	+ 场景二 rich-text组件nodes节点内容存在网络图片，出现异步加载情况，会出现动态修改高度导致出现上述问题
+- waterflow 组件的 overflow 属性不支持配置 visible
+
+::: sourceCode
+## flow-item
+
+> 组件类型：UniFlowItemElement 
+
+ waterflow组件的唯一合法子组件
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| <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.41 | 4.41 | 4.81 | 5.02 |
+
+waterflow 的子组件，配合 waterflow 内部业务实现 flow-item 回收复用，实现高性能的瀑布流长列表组件。flow-item 组件宽度由 waterflow 的 cross-axis-count 属性决定，所以设置与宽度相关的style样式都不生效。
+
+flow-item 宽度计算公式：((waterflow的width - waterflow的左右的padding值域 - waterflow的border-width的值域) - (cross-axis-count - 1) * cross-axis-gap) / cross-axis-count
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| type | number | 0 | Web x / 微信小程序 x / Android 4.41 / iOS 4.41 / HarmonyOS(VDOM) 4.81 / HarmonyOS(Vapor) 5.02（部分支持，见上） | 对应flow-item的类型 waterflow 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 waterflow 性能 |
+| item-key | string \| number |   |   |   |
+| item-height | number |   |   |   |
+
+### flow-item复用机制
+
+waterflow 与 list-view 实现机制几乎一致，所以 flow-item 与 list-item 组件复用机制是一样的，请参考：[list-item复用机制](list-item.md#list-item复用机制)
+
+### 子组件 @children-tags
+支持所有组件
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.waterflow.flow-item)
+- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=flow-item&doc_type=miniprogram)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=flow-item&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=flow-item&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=flow-item&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=flow-item&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=flow-item)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=flow-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)