ENewspaperPageComponent.ets
6.01 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import { NewspaperListBean, NewspaperListItemBean } from 'wdBean'
import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel'
import router from '@ohos.router'
import { ENewspaperItemComponent } from './ENewspaperItemComponent'
@Component
export struct ENewspaperPageComponent {
@State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
@State currentPageNum: string = '01';
private swiperController: SwiperController = new SwiperController()
build() {
RelativeContainer() {
RelativeContainer() {
Image($r('app.media.icon_arrow_down'))
.height($r('app.float.top_arrow_size'))
.width($r('app.float.top_arrow_size'))
.alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.id('e_newspaper_back')
.onClick((event: ClickEvent) => {
router.back()
})
Row() {
Text('2024.01.26')
.fontSize($r('app.float.font_size_20'))
.fontColor($r('app.color.white'))
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
.height($r('app.float.border_radius_6'))
.margin({ left: 2, bottom: 5 })
}
.alignItems(VerticalAlign.Bottom)
.alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.id('e_newspaper_date')
Image($r('app.media.icon_share'))
.height($r('app.float.top_arrow_size'))
.width($r('app.float.top_arrow_size'))
.alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.id('e_newspaper_share')
}
.margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
.height($r('app.float.top_bar_height'))
.alignRules({ top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End } })
.id('e_newspaper_top')
if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
Swiper(this.swiperController) {
ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
ENewspaperItemComponent({newspaperListItemBean: item})
})
}
.width('100%')
.vertical(true)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.displayCount(1)
.aspectRatio(0.7)
.margin({ top: $r('app.float.vp_55'), left: 10, right: 10 })
.id('e_newspaper_content')
.alignRules({ top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center } })
.onChange((index: number) => {
this.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
})
Image($r('app.media.newspaper_shadow'))
.height($r('app.float.vp_12'))
.margin({ left: 12, right: 12, top: -2 })
.objectFit(ImageFit.Contain)
.alignRules({ top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End } })
.id('e_newspaper_shadow')
Row() {
Text('滑动查看下一版')
.fontColor(Color.White)
.fontSize($r('app.float.font_size_14'))
Image($r('app.media.icon_next_page'))
.width($r('app.float.vp_16'))
.height($r('app.float.vp_16'))
}
.justifyContent(FlexAlign.Center)
.margin({ top: $r('app.float.margin_16') })
.alignRules({ top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center } })
.id('e_newspaper_next')
.onClick((event: ClickEvent) => {
this.swiperController.showNext()
})
}
Row() {
Text(this.currentPageNum)
.fontSize($r('app.float.font_size_36'))
.fontColor($r('app.color.white'))
Text('版')
.fontSize($r('app.float.font_size_16'))
.fontColor($r('app.color.white'))
.margin({ bottom: 6 })
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
.height($r('app.float.border_radius_6'))
.margin({ left: 2, bottom: 6 })
}
.alignItems(VerticalAlign.Bottom)
.margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
.alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start } })
.id('e_newspaper_page_num')
Row() {
Image($r('app.media.icon_read_paper'))
.width($r('app.float.vp_20'))
.height($r('app.float.vp_20'))
.margin({ right: $r('app.float.vp_3') })
Text('读报纸')
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.white'))
}
.alignItems(VerticalAlign.Center)
.margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
.alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
right: { anchor: '__container__', align: HorizontalAlign.End } })
.id('e_newspaper_read')
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.color_80000000'))
.id('e_newspaper_container')
}
aboutToAppear() {
let listBean = NewspaperViewModel.getNewspaperListFromLocal(getContext(this));
this.newspaperListBean = listBean;
}
aboutToDisappear() {
}
}