Showing
4 changed files
with
93 additions
and
61 deletions
| 1 | import { CompDTO, ContentDTO } from 'wdBean'; | 1 | import { CompDTO, ContentDTO } from 'wdBean'; |
| 2 | import { CommonConstants } from 'wdConstant/Index'; | 2 | import { CommonConstants } from 'wdConstant/Index'; |
| 3 | +import { CollectionUtils, DateTimeUtils, Logger, StringUtils, ToastUtils } from 'wdKit/Index'; | ||
| 4 | +import PageViewModel from '../../viewmodel/PageViewModel'; | ||
| 3 | 5 | ||
| 4 | const TAG = 'Zh_Grid_Layout-02'; | 6 | const TAG = 'Zh_Grid_Layout-02'; |
| 5 | const FULL_PARENT: string = '100%'; | 7 | const FULL_PARENT: string = '100%'; |
| @@ -11,46 +13,76 @@ let listSize: number = 2; | @@ -11,46 +13,76 @@ let listSize: number = 2; | ||
| 11 | * Zh_Grid_Layout-02 | 13 | * Zh_Grid_Layout-02 |
| 12 | * | 14 | * |
| 13 | */ | 15 | */ |
| 14 | -@Preview | ||
| 15 | @Component | 16 | @Component |
| 16 | export struct ZhGridLayout02 { | 17 | export struct ZhGridLayout02 { |
| 17 | @State compDTO: CompDTO = {} as CompDTO | 18 | @State compDTO: CompDTO = {} as CompDTO |
| 19 | + @State operDataList: ContentDTO[] = [] | ||
| 20 | + currentPage = 1 | ||
| 21 | + pageSize = 12 | ||
| 18 | 22 | ||
| 19 | aboutToAppear() { | 23 | aboutToAppear() { |
| 20 | - if (this.compDTO.operDataList) { | ||
| 21 | - listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length; | ||
| 22 | - } | 24 | + Logger.debug(TAG, 'aboutToAppear ' + this.compDTO.objectTitle) |
| 25 | + this.currentPage = 1 | ||
| 26 | + PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => { | ||
| 27 | + this.operDataList = [] | ||
| 28 | + this.operDataList.push(...liveReviewDTO.list) | ||
| 29 | + }) | ||
| 23 | } | 30 | } |
| 24 | 31 | ||
| 25 | build() { | 32 | build() { |
| 26 | Column() { | 33 | Column() { |
| 27 | - Row() { | ||
| 28 | - Image($r("app.media.redLine")) | ||
| 29 | - .width(3) | ||
| 30 | - .height(16) | ||
| 31 | - .margin({ right: 4 }) | ||
| 32 | - Text(this.compDTO.objectTitle) | ||
| 33 | - .fontSize($r("app.float.font_size_17")) | ||
| 34 | - .fontColor($r("app.color.color_222222")) | ||
| 35 | - .fontWeight(600) | ||
| 36 | - } | ||
| 37 | - .justifyContent(FlexAlign.Start) | ||
| 38 | - .margin({ top: 8, bottom: 8 }) | ||
| 39 | - .width(CommonConstants.FULL_WIDTH) | ||
| 40 | 34 | ||
| 41 | 35 | ||
| 42 | - GridRow({ | ||
| 43 | - columns: { sm: listSize, md: 2 }, | ||
| 44 | - breakpoints: { value: ['320vp', '520vp', '840vp'] } | ||
| 45 | - }) { | ||
| 46 | - ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { | ||
| 47 | - GridCol() { | ||
| 48 | - this.buildItemCard(this.compDTO.operDataList[index]); | 36 | + Scroll() { |
| 37 | + Column() { | ||
| 38 | + Row() { | ||
| 39 | + Image($r("app.media.redLine")) | ||
| 40 | + .width(3) | ||
| 41 | + .height(16) | ||
| 42 | + .margin({ right: 4 }) | ||
| 43 | + Text(this.compDTO.objectTitle) | ||
| 44 | + .fontSize($r("app.float.font_size_17")) | ||
| 45 | + .fontColor($r("app.color.color_222222")) | ||
| 46 | + .fontWeight(600) | ||
| 47 | + } | ||
| 48 | + .justifyContent(FlexAlign.Start) | ||
| 49 | + .margin({ top: 8, bottom: 8 }) | ||
| 50 | + .width(CommonConstants.FULL_WIDTH) | ||
| 51 | + | ||
| 52 | + GridRow({ | ||
| 53 | + columns: { sm: listSize, md: 2 }, | ||
| 54 | + breakpoints: { value: ['320vp', '520vp', '840vp'] } | ||
| 55 | + }) { | ||
| 56 | + ForEach(this.operDataList, (item: ContentDTO, index: number) => { | ||
| 57 | + GridCol() { | ||
| 58 | + this.buildItemCard(item); | ||
| 59 | + } | ||
| 60 | + }) | ||
| 49 | } | 61 | } |
| 50 | - }) | 62 | + } |
| 63 | + | ||
| 51 | } | 64 | } |
| 65 | + .width("100%") | ||
| 66 | + .height("100%") | ||
| 67 | + // .layoutWeight(1) | ||
| 68 | + .edgeEffect(EdgeEffect.None) | ||
| 69 | + .scrollBar(BarState.Off) | ||
| 70 | + .onReachStart(() => { | ||
| 71 | + Logger.debug(TAG, 'onReachStart') | ||
| 72 | + }) | ||
| 73 | + .onReachEnd(() => { | ||
| 74 | + Logger.debug(TAG, 'onReachEnd') | ||
| 75 | + this.addItems() | ||
| 76 | + }) | ||
| 77 | + .nestedScroll({ | ||
| 78 | + scrollForward: NestedScrollMode.PARENT_FIRST, | ||
| 79 | + scrollBackward: NestedScrollMode.SELF_FIRST | ||
| 80 | + }) | ||
| 52 | } | 81 | } |
| 53 | .width(CommonConstants.FULL_WIDTH) | 82 | .width(CommonConstants.FULL_WIDTH) |
| 83 | + // .width("100%") | ||
| 84 | + .height("100%") | ||
| 85 | + // .layoutWeight(1) | ||
| 54 | .padding({ | 86 | .padding({ |
| 55 | top: 14, | 87 | top: 14, |
| 56 | left: 16, | 88 | left: 16, |
| @@ -78,6 +110,15 @@ export struct ZhGridLayout02 { | @@ -78,6 +110,15 @@ export struct ZhGridLayout02 { | ||
| 78 | } | 110 | } |
| 79 | .width('100%') | 111 | .width('100%') |
| 80 | } | 112 | } |
| 113 | + | ||
| 114 | + addItems() { | ||
| 115 | + Logger.debug(TAG, 'addItems') | ||
| 116 | + this.currentPage++ | ||
| 117 | + PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => { | ||
| 118 | + this.operDataList.push(...liveReviewDTO.list) | ||
| 119 | + Logger.debug(TAG, 'addItems after: ' + this.operDataList.length) | ||
| 120 | + }) | ||
| 121 | + } | ||
| 81 | } | 122 | } |
| 82 | 123 | ||
| 83 | 124 |
| @@ -77,11 +77,13 @@ export struct PageComponent { | @@ -77,11 +77,13 @@ export struct PageComponent { | ||
| 77 | refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage, | 77 | refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage, |
| 78 | this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight) | 78 | this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight) |
| 79 | }) | 79 | }) |
| 80 | - } else { | 80 | + } else if (!this.pageModel.contentNeedScroll) { |
| 81 | NoMoreLayout() | 81 | NoMoreLayout() |
| 82 | } | 82 | } |
| 83 | } | 83 | } |
| 84 | } | 84 | } |
| 85 | + // comp自己处理分页,这里设置EdgeEffect.None | ||
| 86 | + .edgeEffect(this.pageModel.contentNeedScroll ? EdgeEffect.None : EdgeEffect.Spring) | ||
| 85 | .scrollBar(BarState.Off) | 87 | .scrollBar(BarState.Off) |
| 86 | .cachedCount(8) | 88 | .cachedCount(8) |
| 87 | .height(CommonConstants.FULL_PARENT) | 89 | .height(CommonConstants.FULL_PARENT) |
| 1 | import { PageDTO, CompDTO, PageInfoDTO } from 'wdBean'; | 1 | import { PageDTO, CompDTO, PageInfoDTO } from 'wdBean'; |
| 2 | -import { ViewType } from 'wdConstant/Index'; | ||
| 3 | -import { DateTimeUtils, Logger } from 'wdKit'; | 2 | +import { CompStyle, ViewType } from 'wdConstant/Index'; |
| 3 | +import { CollectionUtils, DateTimeUtils, Logger } from 'wdKit'; | ||
| 4 | import { closeRefresh } from '../utils/PullDownRefresh'; | 4 | import { closeRefresh } from '../utils/PullDownRefresh'; |
| 5 | import PageModel from './PageModel'; | 5 | import PageModel from './PageModel'; |
| 6 | import PageViewModel from './PageViewModel'; | 6 | import PageViewModel from './PageViewModel'; |
| @@ -65,39 +65,33 @@ export class PageHelper { | @@ -65,39 +65,33 @@ export class PageHelper { | ||
| 65 | } else { | 65 | } else { |
| 66 | pageModel.hasMore = false; | 66 | pageModel.hasMore = false; |
| 67 | } | 67 | } |
| 68 | + | ||
| 69 | + // TODO 暂时去掉互动数据,待优化。(主要是互动数据返回,如何渲染到ui上) | ||
| 70 | + // TODO updateItems(sizeBefore, data),这里可能有时序问题,导致覆盖别的group数据,需要优化,考虑精准替换 | ||
| 68 | // 二次请求,批查互动数据 | 71 | // 二次请求,批查互动数据 |
| 69 | - PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => { | ||
| 70 | - // 刷新,替换所有数据 | ||
| 71 | - // pageModel.compList.replaceAll(...data) | ||
| 72 | - pageModel.compList.updateItems(sizeBefore, data) | ||
| 73 | - pageModel.timestamp = DateTimeUtils.getTimeStamp().toString() | ||
| 74 | - }) | ||
| 75 | - // TODO 待优化,解决content级别的展现加载 | 72 | + // PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => { |
| 73 | + // // 刷新,替换所有数据 | ||
| 74 | + // // pageModel.compList.replaceAll(...data) | ||
| 75 | + // pageModel.compList.updateItems(sizeBefore, data) | ||
| 76 | + // pageModel.timestamp = DateTimeUtils.getTimeStamp().toString() | ||
| 77 | + // }) | ||
| 78 | + // content级别的展现加载丢给comp自己,这里只需要处理屏蔽分页加载,pageModel.pageScroll | ||
| 76 | if (isLastGroup) { | 79 | if (isLastGroup) { |
| 77 | closeRefresh(pageModel, true); | 80 | closeRefresh(pageModel, true); |
| 78 | - // // 最后一个楼层,特殊处理 | ||
| 79 | - // // 检测楼层最后一个组件业务数据是否需要通过访问接口获取 | ||
| 80 | - // let comp: CompDTO = pageDto.compList[pageDto.compList.length - 1] | ||
| 81 | - // let compSize = CollectionUtils.getListSize(comp.operDataList) | ||
| 82 | - // // 直播回放,需要二次请求数据 | ||
| 83 | - // if (compSize <= 0 && comp.dataSourceType == 'LIVE_END') { | ||
| 84 | - // let liveReviewDTO = await PageViewModel.getLiveReviewUrl(pageModel.currentPage, pageModel.pageSize) | ||
| 85 | - // // content数据回来,塞给comp | ||
| 86 | - // comp.operDataList.push(...liveReviewDTO.list) | ||
| 87 | - // } | 81 | + // 最后一个楼层,特殊处理 |
| 82 | + // 检测楼层最后一个组件业务数据是否需要通过访问接口获取 | ||
| 83 | + let comp: CompDTO = pageDto.compList[pageDto.compList.length - 1] | ||
| 84 | + let compSize = CollectionUtils.getListSize(comp.operDataList) | ||
| 85 | + // 直播回放,需要二次请求数据 | ||
| 86 | + if (compSize <= 0 && comp.compStyle == CompStyle.Zh_Grid_Layout_02) { | ||
| 87 | + // 这个comp,数据自己二次请求,自己分页处理,这里加flag,将page层滑动及loadmore ui去掉 | ||
| 88 | + pageModel.contentNeedScroll = true | ||
| 89 | + } | ||
| 88 | } | 90 | } |
| 89 | } | 91 | } |
| 90 | } | 92 | } |
| 91 | 93 | ||
| 92 | /** | 94 | /** |
| 93 | - * 获取直播回看数据 | ||
| 94 | - */ | ||
| 95 | - private async getLiveEnd(pageModel: PageModel) { | ||
| 96 | - let liveReviewDTO = await PageViewModel.getLiveReviewUrl(pageModel.currentPage, pageModel.pageSize) | ||
| 97 | - Logger.debug(TAG, 'aboutToAppear, getPreviewData ' + liveReviewDTO.hasNext); | ||
| 98 | - } | ||
| 99 | - | ||
| 100 | - /** | ||
| 101 | * comp加载更多,分页加载 | 95 | * comp加载更多,分页加载 |
| 102 | */ | 96 | */ |
| 103 | private compLoadMore(pageModel: PageModel) { | 97 | private compLoadMore(pageModel: PageModel) { |
| @@ -125,14 +119,6 @@ export class PageHelper { | @@ -125,14 +119,6 @@ export class PageHelper { | ||
| 125 | promptAction.showToast({ message: err }); | 119 | promptAction.showToast({ message: err }); |
| 126 | }) | 120 | }) |
| 127 | } | 121 | } |
| 128 | - | ||
| 129 | - /** | ||
| 130 | - * 节目数据分页加载 | ||
| 131 | - * TODO 待完善框架 | ||
| 132 | - */ | ||
| 133 | - private contentLoadMore() { | ||
| 134 | - | ||
| 135 | - } | ||
| 136 | } | 122 | } |
| 137 | 123 | ||
| 138 | 124 |
| @@ -20,6 +20,9 @@ export default class PageModel { | @@ -20,6 +20,9 @@ export default class PageModel { | ||
| 20 | // 当前请求数据的group | 20 | // 当前请求数据的group |
| 21 | groupData: GroupInfoDTO = {} as GroupInfoDTO; | 21 | groupData: GroupInfoDTO = {} as GroupInfoDTO; |
| 22 | compList: LazyDataSource<CompDTO> = new LazyDataSource(); | 22 | compList: LazyDataSource<CompDTO> = new LazyDataSource(); |
| 23 | + // 是否comp自己处理分页加载;默认是最后一个comp下的content有分页数据,需要节目内容的分页加载 | ||
| 24 | + // (如:首页-视频tab-直播tab,最后一个comp是直播回看列表,视频内容需要分页加载) | ||
| 25 | + contentNeedScroll: boolean = false; | ||
| 23 | // 页面状态,刷新、加载更多等,1-首次、2-下拉、3上拉 | 26 | // 页面状态,刷新、加载更多等,1-首次、2-下拉、3上拉 |
| 24 | loadStrategy: number = 1; | 27 | loadStrategy: number = 1; |
| 25 | currentPage: number = 1; | 28 | currentPage: number = 1; |
-
Please register or login to post a comment