ImageSwiperComponent.ets
3.52 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
import { PhotoListBean } from 'wdBean/Index';
import { Logger } from 'wdKit/Index';
import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
import { display } from '@kit.ArkUI';
const TAG = 'ImageSwiperComponent';
@Component
export struct ImageSwiperComponent {
@Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
private scroller: Scroller = new Scroller()
@State swiperIndex: number = 0;
photoList: PhotoListBean[] = [];
private swiperController: SwiperController = new SwiperController()
private displayTool = display.getDefaultDisplaySync()
private screenWidth: number = 0
private picWidth: number = 0
@State picHeight: number = 0
//watch监听页码回调
onCurrentPageNumUpdated(): void {
Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
let _swiperIndex = Number.parseInt(this.currentPageNum)
Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
}
aboutToAppear(): void {
//获取宽高尺寸
this.screenWidth = this.displayTool.width
// this.picWidth = this.screenWidth - vp2px(52)
this.picWidth = this.screenWidth
this.picHeight = this.picWidth * 578 / 375
}
build() {
RelativeContainer() {
if (this.photoList && this.photoList?.length > 0) {
Swiper(this.swiperController) {
ForEach(this.photoList, (item: PhotoListBean) => {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
})
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(false)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.displayCount(1)
.id('e_swiper_content')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.onChange((index: number) => {
this.swiperIndex = index
})
Row() {
Scroll(this.scroller) {
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Start
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.photoList.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}.fontColor(Color.White).margin(4)
}
}
.width('100%')
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
}
.scrollable(ScrollDirection.Vertical)
.scrollBarWidth(0)
}
.id('e_swiper_titles')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
.id('e_picture_container')
// 设置顶部绘制延伸到状态栏
// 设置底部绘制延伸到导航条
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}