zhangbo1_wd

直播回看列表及分页加载处理。

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;