ZhGridLayoutComponent.ets
3.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { CompStyle } from 'wdConstant';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
const TAG = 'Zh_Grid_Layout-03';
const FULL_PARENT: string = '100%';
let listSize: number = 4;
/**
* 金刚卡位
* 枚举值Zh_Grid_Layout-03
* Zh_Grid_Layout-03
*
*/
@Component
export struct ZhGridLayoutComponent {
@State compDTO: CompDTO = {} as CompDTO
// @State compDTO: CompDTO = {
// operDataList: [
// {
// newsTitle: '健康专栏',
// description: "description0",
// coverUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231208/image/display/d4496925a1264a749975ae9b01a4ef46.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
// } as ContentDTO,
// {
// newsTitle: '金刚栏位22233',
// description: "description1",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20240104/image/display/c4a9b526e0994d1bbd3ac8450f5cfc6c.jpg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '体育专栏2',
// description: "description2",
// coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/sjbj-20231206/image/live/bbe6d821e92b48919d90c7dadfd1f05a.jpg?x-oss-process=image/resize,l_850/auto-orient,1/quality,q_95/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '农业',
// description: "description3",
// coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/sjbj-20231109/image/live/102e6eb9356b4ef19405b04c1f6ff875.png?x-oss-process=image/resize,l_850/auto-orient,1/quality,q_95/format,jpg'
// } as ContentDTO,
// {
// newsTitle: '民生铭记',
// description: "description4",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/62bdbbb35dbd45689e00790c81f04c4b.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '春节大欢乐',
// description: "description5",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/f79bbaa5a33b4bd88176071c4f797ff6.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '春节大欢乐',
// description: "description6",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/2c1d917009584ce2bb4a35cbb3a860a0.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '旅游',
// description: "description7",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231222/image/display/117dc516ca5c42d5843c0d32050c9fc6.jpeg?x-oss-process=image/resize,w_240/quality,q_90/format,jpg",
// } as ContentDTO
// ]
// } as CompDTO
aboutToAppear() {
if (this.compDTO.operDataList) {
listSize = this.compDTO.operDataList.length > 5 ? 4 : this.compDTO.operDataList.length;
}
}
build() {
GridRow({
columns: { sm: listSize, md: 8 },
breakpoints: { value: ['320vp', '520vp', '840vp'] }
}) {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
GridCol() {
this.buildItemCard(this.compDTO.operDataList[index]);
}
})
}
}
/**
* 组件项
*
* @param programmeBean item 组件项, 上面icon,下面标题
*/
@Builder
buildItemCard(item: ContentDTO) {
Column() {
Image(item.coverUrl)
.borderRadius(5)
.aspectRatio(1 / 1)
.margin(16)
Text(item.newsTitle)
.fontSize(13)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width('100%')
}
}