BannerComponent.ets
2.61 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
import { CompDTO, ContentDTO, DelayTimeEnum } from 'wdBean';
import { BreakpointConstants, CommonConstants } from 'wdConstant';
import { BreakPointType, Logger } from 'wdKit';
import { CompUtils } from '../utils/CompUtils';
import { CarouselLayout01CardView } from './CardView';
import { EmptyComponent } from './EmptyComponent';
const TAG = 'BannerComponent';
/**
* 轮播组件,即Banner/轮播大图/焦点图/自动滑动
* 样式：
* 'Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
*/
@Component
export struct BannerComponent {
@StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
@State compDTO: CompDTO = {} as CompDTO
watchCurrentBreakpoint() {
Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
}
aboutToAppear() {
Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
}
aboutToDisappear() {
Logger.info(TAG, 'aboutToDisappear');
}
onPageShow() {
Logger.info(TAG, 'onPageShow');
}
onPageHide() {
Logger.info(TAG, 'onPageHide');
}
onBackPress() {
Logger.info(TAG, 'onBackPress');
}
build() {
if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
Swiper() {
ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
this.buildItemBanner01(item, index)
})
}
.margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
.padding({ bottom: 14 })
.displayCount(this.buildDisplayCount()) // 仅展示1个图片
.cachedCount(2)
.index(1) // The default index of Swiper.
.autoPlay(true)
.interval(DelayTimeEnum.INTERVAL_4000)
.indicator(Indicator.dot()
.right(5)
.itemWidth(4)
.itemHeight(4)
.selectedItemWidth(10)
.selectedItemHeight(6))
.loop(true)
.duration(DelayTimeEnum.DURATION_1000)
.vertical(false)
.curve(Curve.Linear)
.onChange((index: number) => {
Logger.info(TAG, `Swiper onChange index : ${index}`);
})
} else {
EmptyComponent({ emptyHeight: 200 })
}
}
public buildDisplayCount(): number {
return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
}
/**
* 组件项
*
* @param programmeBean item 组件项
*/
@Builder
buildItemBanner01(item: ContentDTO, index: number) {
CarouselLayout01CardView({
item: item,
index: index
})
}
}