ref |> 调整评论列表数据加载交互,解决每次进入页面会把所有评论数据都加载一遍
Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>
Showing
5 changed files
with
66 additions
and
7 deletions
| @@ -69,6 +69,7 @@ export struct DynamicDetailComponent { | @@ -69,6 +69,7 @@ export struct DynamicDetailComponent { | ||
| 69 | @State isNetConnected: boolean = true | 69 | @State isNetConnected: boolean = true |
| 70 | @State isPageEnd: boolean = false | 70 | @State isPageEnd: boolean = false |
| 71 | @State publishCommentModel: publishCommentModel = new publishCommentModel() | 71 | @State publishCommentModel: publishCommentModel = new publishCommentModel() |
| 72 | + @State reachEndIncreament: number = 0 | ||
| 72 | 73 | ||
| 73 | async aboutToAppear() { | 74 | async aboutToAppear() { |
| 74 | await this.getContentDetailData() | 75 | await this.getContentDetailData() |
| @@ -709,4 +710,4 @@ interface radiusType { | @@ -709,4 +710,4 @@ interface radiusType { | ||
| 709 | topRight: number | Resource; | 710 | topRight: number | Resource; |
| 710 | bottomLeft: number | Resource; | 711 | bottomLeft: number | Resource; |
| 711 | bottomRight: number | Resource; | 712 | bottomRight: number | Resource; |
| 712 | -} | ||
| 713 | +} |
| @@ -52,6 +52,7 @@ export struct ImageAndTextPageComponent { | @@ -52,6 +52,7 @@ export struct ImageAndTextPageComponent { | ||
| 52 | @State isNetConnected: boolean = true | 52 | @State isNetConnected: boolean = true |
| 53 | @State info: Area | null = null | 53 | @State info: Area | null = null |
| 54 | @State likeNum: number = 0 | 54 | @State likeNum: number = 0 |
| 55 | + @State reachEndIncreament : number = 0 | ||
| 55 | 56 | ||
| 56 | build() { | 57 | build() { |
| 57 | Column() { | 58 | Column() { |
| @@ -141,7 +142,12 @@ export struct ImageAndTextPageComponent { | @@ -141,7 +142,12 @@ export struct ImageAndTextPageComponent { | ||
| 141 | if (this.contentDetailData?.openComment) { | 142 | if (this.contentDetailData?.openComment) { |
| 142 | Divider().strokeWidth(6).color('#f5f5f5') | 143 | Divider().strokeWidth(6).color('#f5f5f5') |
| 143 | CommentComponent({ | 144 | CommentComponent({ |
| 144 | - publishCommentModel: this.publishCommentModel | 145 | + publishCommentModel: this.publishCommentModel, |
| 146 | + fixedHeightMode: false, | ||
| 147 | + reachEndIncreament: this.reachEndIncreament, | ||
| 148 | + reachEndLoadMoreFinish: () => { | ||
| 149 | + | ||
| 150 | + } | ||
| 145 | }).onAreaChange((oldValue: Area, newValue: Area) => { | 151 | }).onAreaChange((oldValue: Area, newValue: Area) => { |
| 146 | this.info = newValue | 152 | this.info = newValue |
| 147 | }) | 153 | }) |
| @@ -157,6 +163,9 @@ export struct ImageAndTextPageComponent { | @@ -157,6 +163,9 @@ export struct ImageAndTextPageComponent { | ||
| 157 | .padding({ bottom: 76 }) | 163 | .padding({ bottom: 76 }) |
| 158 | .scrollBar(BarState.Off) | 164 | .scrollBar(BarState.Off) |
| 159 | .align(Alignment.Top) | 165 | .align(Alignment.Top) |
| 166 | + .onReachEnd(() => { | ||
| 167 | + this.reachEndIncreament += 1 | ||
| 168 | + }) | ||
| 160 | 169 | ||
| 161 | if (!this.isNetConnected) { | 170 | if (!this.isNetConnected) { |
| 162 | EmptyComponent({ | 171 | EmptyComponent({ |
| @@ -340,4 +349,4 @@ export struct ImageAndTextPageComponent { | @@ -340,4 +349,4 @@ export struct ImageAndTextPageComponent { | ||
| 340 | 349 | ||
| 341 | aboutToDisappear() { | 350 | aboutToDisappear() { |
| 342 | } | 351 | } |
| 343 | -} | ||
| 352 | +} |
| @@ -20,6 +20,8 @@ export class publishCommentModel { | @@ -20,6 +20,8 @@ export class publishCommentModel { | ||
| 20 | targetType: string = '' | 20 | targetType: string = '' |
| 21 | /*评论总数*/ | 21 | /*评论总数*/ |
| 22 | totalCommentNumer: string = '0' | 22 | totalCommentNumer: string = '0' |
| 23 | + /// 游客评论开关:visitorComment 1:打开;0:关闭 | ||
| 24 | + visitorComment: string = "0" | ||
| 23 | 25 | ||
| 24 | //评论传参 | 26 | //评论传参 |
| 25 | /*评论图片url,多个逗号隔开*/ | 27 | /*评论图片url,多个逗号隔开*/ |
| @@ -24,12 +24,17 @@ export struct CommentComponent { | @@ -24,12 +24,17 @@ export struct CommentComponent { | ||
| 24 | @ObjectLink publishCommentModel: publishCommentModel | 24 | @ObjectLink publishCommentModel: publishCommentModel |
| 25 | listScroller: ListScroller = new ListScroller(); // scroller控制器 | 25 | listScroller: ListScroller = new ListScroller(); // scroller控制器 |
| 26 | historyOffset: number = 0; // 上次浏览到列表距离顶端的偏移量offset | 26 | historyOffset: number = 0; // 上次浏览到列表距离顶端的偏移量offset |
| 27 | - isloading: boolean = false | ||
| 28 | @State allDatas: LazyDataSource<commentItemModel> = new LazyDataSource(); | 27 | @State allDatas: LazyDataSource<commentItemModel> = new LazyDataSource(); |
| 29 | @State dialogController: CustomDialogController | null = null; | 28 | @State dialogController: CustomDialogController | null = null; |
| 30 | 29 | ||
| 31 | // @State private browSingModel: commentListModel = new commentListModel() | 30 | // @State private browSingModel: commentListModel = new commentListModel() |
| 32 | 31 | ||
| 32 | + // 是否为固定高度模式。true时,里面上拉加载更多生效,外层不能包Scroll。 | ||
| 33 | + // false时,外层实现加载更多,并通过reachEndIncreament通知开发加载更多,reachEndLoadMoreFinish 通知上层加载更多完成 | ||
| 34 | + fixedHeightMode: boolean = false | ||
| 35 | + @Prop @Watch("parentOnReachEnd") reachEndIncreament : number = 0 | ||
| 36 | + reachEndLoadMoreFinish?: () => void | ||
| 37 | + | ||
| 33 | // 在自定义组件即将析构销毁时将dialogControlle置空 | 38 | // 在自定义组件即将析构销毁时将dialogControlle置空 |
| 34 | aboutToDisappear() { | 39 | aboutToDisappear() { |
| 35 | this.dialogController = null // 将dialogController置空 | 40 | this.dialogController = null // 将dialogController置空 |
| @@ -183,23 +188,43 @@ export struct CommentComponent { | @@ -183,23 +188,43 @@ export struct CommentComponent { | ||
| 183 | 188 | ||
| 184 | // 加载更多 | 189 | // 加载更多 |
| 185 | ListItem() { | 190 | ListItem() { |
| 186 | - if (this.hasMore === false) { | 191 | + if (this.hasMore == false) { |
| 187 | NoMoreLayout() | 192 | NoMoreLayout() |
| 188 | } | 193 | } |
| 189 | } | 194 | } |
| 190 | } | 195 | } |
| 191 | - | ||
| 192 | } | 196 | } |
| 197 | + .margin({bottom: 10}) | ||
| 193 | .onReachEnd(() => { | 198 | .onReachEnd(() => { |
| 199 | + if (!this.fixedHeightMode) { | ||
| 200 | + return | ||
| 201 | + } | ||
| 194 | if (this.hasMore) { | 202 | if (this.hasMore) { |
| 195 | this.getData() | 203 | this.getData() |
| 196 | } | 204 | } |
| 197 | }) | 205 | }) |
| 198 | - .enableScrollInteraction(false) | 206 | + .enableScrollInteraction(this.fixedHeightMode ? true: false) |
| 207 | + // .nestedScroll({ | ||
| 208 | + // scrollForward: NestedScrollMode.PARENT_FIRST, | ||
| 209 | + // scrollBackward: NestedScrollMode.SELF_FIRST | ||
| 210 | + // }) | ||
| 199 | } | 211 | } |
| 200 | 212 | ||
| 201 | } | 213 | } |
| 202 | 214 | ||
| 215 | + parentOnReachEnd() { | ||
| 216 | + if (this.fixedHeightMode) { | ||
| 217 | + return | ||
| 218 | + } | ||
| 219 | + if (this.hasMore) { | ||
| 220 | + this.getData() | ||
| 221 | + } else { | ||
| 222 | + if (this.reachEndLoadMoreFinish) { | ||
| 223 | + this.reachEndLoadMoreFinish() | ||
| 224 | + } | ||
| 225 | + } | ||
| 226 | + } | ||
| 227 | + | ||
| 203 | //获取数据 | 228 | //获取数据 |
| 204 | async getData() { | 229 | async getData() { |
| 205 | commentViewModel.fetchContentCommentList(this.currentPage + '', this.publishCommentModel.targetId, | 230 | commentViewModel.fetchContentCommentList(this.currentPage + '', this.publishCommentModel.targetId, |
| @@ -237,6 +262,9 @@ export struct CommentComponent { | @@ -237,6 +262,9 @@ export struct CommentComponent { | ||
| 237 | } else { | 262 | } else { |
| 238 | this.hasMore = false | 263 | this.hasMore = false |
| 239 | } | 264 | } |
| 265 | + if (!this.fixedHeightMode && this.reachEndLoadMoreFinish) { | ||
| 266 | + this.reachEndLoadMoreFinish() | ||
| 267 | + } | ||
| 240 | }) | 268 | }) |
| 241 | } | 269 | } |
| 242 | } | 270 | } |
sight_harmony/features/wdComponent/src/main/ets/components/comment/view/CommentListDialog.ets
0 → 100644
| 1 | +import { ContentDetailDTO, PageInfoDTO } from 'wdBean/Index' | ||
| 2 | +import { publishCommentModel } from '../model/PublishCommentModel' | ||
| 3 | + | ||
| 4 | +@CustomDialog | ||
| 5 | +export struct CommentListDialog { | ||
| 6 | + | ||
| 7 | + /// 内部使用 | ||
| 8 | + private publishCommentModel: publishCommentModel = new publishCommentModel() | ||
| 9 | + controller?: CustomDialogController | ||
| 10 | + | ||
| 11 | + /// 外部初始化 | ||
| 12 | + contentDetail?: ContentDetailDTO | ||
| 13 | + pageInfo?: PageInfoDTO | ||
| 14 | + | ||
| 15 | + build() { | ||
| 16 | + } | ||
| 17 | + | ||
| 18 | + | ||
| 19 | +} |
-
Please register or login to post a comment