SingleRow03Component.ets
3.33 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
106
107
108
109
110
111
112
113
114
import { Action, ContentDTO, Params } from 'wdBean';
import { ConfigConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
const TAG = 'SingleRow03Component';
/**
* 直播横划卡
* Single_Row-03
* 支持添加直播内容
*/
@Component
export struct SingleRow03Component {
@State dataList?: ContentDTO[] = undefined
build() {
List( {space: 2.5}){
ForEach(this.dataList, (item : ContentDTO, index?: number) =>{
ListItem(){
this.contentItem(item, index)
}
} , (item: ContentDTO) => JSON.stringify(item))
}
.listDirection(Axis.Horizontal)
.lanes(1)
.margin({left: 12, right: 12})
.scrollBar(BarState.Off)
}
@Builder
contentItem(item: ContentDTO, index?: number){
Column(){
RelativeContainer() {
Image(item.coverUrl)
.width('100%')
.height($r('app.float.single_row_03_img_height'))
.borderRadius($r("app.float.image_border_radius"))
.objectFit(ImageFit.Cover)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id('img_cover')
Text(item.title)
.width('100%')
.margin({ top: 4, left: 6, right: 6 })
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Start)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_333333'))
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.alignRules({
top: {anchor:'img_cover', align: VerticalAlign.Bottom},
left: {anchor: 'img_cover', align: HorizontalAlign.Start},
right:{anchor: 'img_cover', align: HorizontalAlign.End}
})
.id("tv_title")
Button('预约')
.width(58)
.height(24)
.margin({bottom: 6})
.backgroundColor(0xF55A42)
.id('button')
.alignRules({
bottom: {anchor:'__container__', align: VerticalAlign.Bottom},
right:{anchor: '__container__', align: HorizontalAlign.End}
})
.onClick((event: ClickEvent) => {
})
Text(item.startTime.substring(0, 10))
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Start)
.margin({ left: 6})
.fontSize($r('app.float.font_size_10'))
.fontColor($r('app.color.color_999999'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.alignRules({
center: {anchor:'button', align:VerticalAlign.Center},
left: {anchor: 'tv_title', align: HorizontalAlign.Start},
})
.id("tv_start_time")
}
.width('100%')
.height('100%')
}
.width($r('app.float.single_row_03_item_width'))
.height($r('app.float.single_row_03_item_height'))
.backgroundColor(Color.White)
.alignItems(HorizontalAlign.Start)
.onClick((event: ClickEvent) => {
Logger.info(TAG, `contentItem onClick event index: ${index}`);
let taskAction: Action = {
type: 'JUMP_H5_BY_WEB_VIEW',
params: {
url: ConfigConstants.DETAIL_URL
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
})
}
}