Swiper内图片通过expandSafeArea实现沉浸式，可以给Swiper设置宽高比，给图片宽高设置沾满100%，来避免Swiper底部异常的问题。
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
| @Component
export struct SwiperPage {
@State param?: BannerList[] = []
aboutToAppear(): void {
this.param = HMRouterMgr.getCurrentParam() as BannerList[]
}
@Builder
buildImage(param: BannerList) {
Image(param?.imageURL)
.width('100%')
.width('100%')
.objectFit(ImageFit.Cover)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
}
build() {
Swiper() {
ForEach(this.param, (item: BannerList) => {
this.buildImage(item)
})
}
.width("100%")
.aspectRatio(16/9)
.autoPlay(true)
.backgroundColor(Color.Blue)
.indicator(DotIndicator.dot()
.itemWidth(8)
.itemHeight(3)
.selectedItemWidth(8)
.selectedItemHeight(3)
.selectedColor($r('app.color.color_green'))
.color($r('app.color.color_gray')))
.clip(false)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
}
}
|
