From 8e59529f72946aa5585742a517f7b99a75bc199e Mon Sep 17 00:00:00 2001 From: wwwcg Date: Wed, 30 Oct 2024 14:19:22 +0800 Subject: [PATCH] feat(ios): waterfall component support footer view (#4098) refactor waterfall component --- docs/api/hippy-react/components.md | 3 +- docs/api/hippy-vue/external-components.md | 4 +- .../src/components/WaterfallView/index.jsx | 25 +++- .../native-demos/demo-waterfall.vue | 18 ++- .../components/native-demo/demo-waterfall.vue | 18 ++- .../src/components/waterfall-view.tsx | 30 ++++- .../waterfalllist/HippyShadowWaterfallItem.h | 6 + .../HippyWaterfallItemViewManager.m | 3 + .../waterfalllist/HippyWaterfallView.h | 12 +- .../waterfalllist/HippyWaterfallView.mm | 101 +++++++++----- .../HippyWaterfallViewDataSource.h | 26 +++- .../HippyWaterfallViewDataSource.m | 126 ++++++------------ .../waterfalllist/HippyWaterfallViewManager.m | 2 + 13 files changed, 238 insertions(+), 136 deletions(-) diff --git a/docs/api/hippy-react/components.md b/docs/api/hippy-react/components.md index dedb680ed7f..257329214cf 100644 --- a/docs/api/hippy-react/components.md +++ b/docs/api/hippy-react/components.md @@ -541,7 +541,8 @@ import icon from './qb_icon_new.png'; | interItemSpacing | item 间的垂直间距 | `number` | `Android、iOS、Voltron` | | contentInset | 内容缩进 ，默认值 `{ top:0, left:0, bottom:0, right:0 }` | `Object` | `Android、iOS、Voltron` | | renderItem | 这里的入参是当前 item 的 index，在这里可以凭借 index 获取到瀑布流一个具体单元格的数据，从而决定如何渲染这个单元格。 | `(index: number) => React.ReactElement` | `Android、iOS、Voltron` | -| renderBanner | 如何渲染 Banner。 | `() => React.ReactElement` | `Android、iOS、Voltron` +| renderBanner | 如何渲染 Banner (即Header，显示在内容顶部) | `() => React.ReactElement` | `Android、iOS、Voltron` | +| renderFooter | 如何渲染 Footer（与renderBanner对应，Footer显示在内容底部） | `() => React.ReactElement` | `iOS`（3.3.2版本起支持） | | getItemStyle | 设置`WaterfallItem`容器的样式。 | `(index: number) => styleObject` | `Android、iOS、Voltron` | | getItemType | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升list 性能。 | `(index: number) => number` | `Android、iOS、Voltron` | | getItemKey | 指定一个函数，在其中返回对应条目的 Key 值，详见 [React 官文](//reactjs.org/docs/lists-and-keys.html) | `(index: number) => any` | `Android、iOS、Voltron` | diff --git a/docs/api/hippy-vue/external-components.md b/docs/api/hippy-vue/external-components.md index 6c6c112713a..1ccade411be 100644 --- a/docs/api/hippy-vue/external-components.md +++ b/docs/api/hippy-vue/external-components.md @@ -280,7 +280,7 @@ export default { | columnSpacing | 瀑布流每列之前的水平间距 | `number` | `Android、iOS、Voltron` | | interItemSpacing | item 间的垂直间距 | `number` | `Android、iOS、Voltron` | | contentInset | 内容缩进 ，默认值 `{ top:0, left:0, bottom:0, right:0 }` | `Object` | `Android、iOS、Voltron` | -| containBannerView | 是否包含`bannerView`，只能有一个bannerView，`Android` 暂不支持 | `boolean` | `iOS、Voltron` | +| containBannerView | 是否包含`bannerView`，只能有一个bannerView， (`Android` 暂不支持，`iOS` 3.3.2版本起已废弃该属性，请使用`waterfall-item`组件`isHeader/isFooter`属性代替) | `boolean` | `iOS、Voltron` | | containPullHeader | 是否包含`pull-header`；`Android` 暂不支持，可以用 `ul-refresh` 组件替代 | `boolean` | `iOS、Voltron` | | containPullFooter | 是否包含 `pull-footer` | `boolean` | `Android、iOS、Voltron` | | numberOfColumns | 瀑布流列数量，Default: 2 | `number` | `Android、iOS、Voltron` | @@ -323,3 +323,5 @@ export default { | --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- | | type | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。 | `number` | `Android、iOS、Voltron` | | key | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//vuejs.org/v2/guide/list.html) | `string` | `Android、iOS、Voltron` | +| isHeader | 指定该Item是否为Header（即bannerView，显示在内容区顶部） | `boolean` | `iOS`（3.3.2版本起支持） | +| isFooter | 指定该Item是否为Footer（显示在内容区底部） | `boolean` | `iOS`（3.3.2版本起支持） | diff --git a/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx b/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx index 816642785ae..fba0512584b 100644 --- a/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx +++ b/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx @@ -74,6 +74,7 @@ export default class ListExample extends React.Component { this.onHeaderPulling = this.onHeaderPulling.bind(this); this.onFooterPulling = this.onFooterPulling.bind(this); this.renderBanner = this.renderBanner.bind(this); + this.renderFooter = this.renderFooter.bind(this); this.getItemStyle = this.getItemStyle.bind(this); this.getHeaderStyle = this.getHeaderStyle.bind(this); this.onScroll = this.onScroll.bind(this); @@ -236,10 +237,10 @@ export default class ListExample extends React.Component { } onScroll(obj) { - + console.log('onScroll', obj); } - // render banner(it is not supported on Android yet) + // render banner renderBanner() { if (this.state.dataSource.length === 0) return null; return (); } + // render footer (currently only iOS support) + renderFooter() { + if (this.state.dataSource.length === 0) return null; + return ( + Footer View + ); + } + renderItem(index) { const { dataSource } = this.state; let styleUI = null; @@ -361,7 +380,9 @@ export default class ListExample extends React.Component { style={{ flex: 1 }} onScroll={this.onScroll} renderBanner={this.renderBanner} + renderFooter={this.renderFooter} renderPullHeader={this.renderPullHeader} + renderPullFooter={this.renderPullFooter} onEndReached={this.onEndReached} onFooterReleased={this.onEndReached} onHeaderReleased={this.onHeaderReleased} diff --git a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue index e5ac2d39307..7c8c2275064 100644 --- a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue +++ b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue @@ -4,7 +4,6 @@ ref="gridView" :content-inset="contentInset" :column-spacing="columnSpacing" - :contain-banner-view="isIos" :contain-pull-footer="true" :inter-item-spacing="interItemSpacing" :number-of-columns="numberOfColumns" @@ -25,16 +24,17 @@

+ +