陈剑华

fix: 轮播图只有一条数据时折叠屏展开适配

... ... @@ -87,88 +87,109 @@ export struct ZhCarouselLayout01 {
build() {
if (this.compDTO?.operDataList?.length) {
Stack() {
Swiper() {
ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
CarouselLayout01CardView({
item: item,
length: this.compDTO.operDataList.length,
showPicBorderRadius: this.compDTO.operDataList.length == 1
})
.onClick((event: ClickEvent) => {
InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
Logger.info(TAG, `ZhCarouselLayout01 onClick event index: ${index}`)
ProcessUtils.processPage(item)
if (this.compDTO?.operDataList.length > 1) {
Stack() {
Swiper() {
ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
CarouselLayout01CardView({
item: item,
length: this.compDTO.operDataList.length,
showPicBorderRadius: this.compDTO.operDataList.length == 1
})
.onClick((event: ClickEvent) => {
InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
Logger.info(TAG, `ZhCarouselLayout01 onClick event index: ${index}`)
ProcessUtils.processPage(item)
})
})
}
.borderRadius($r('app.float.image_border_radius'))
.displayCount(this.buildDisplayCount()) // 仅展示1个图片
.cachedCount(2)
.index(0) // The default index of Swiper.
.indicator(false)
.loop(true)
.vertical(false)
.curve(Curve.Linear)
.autoPlay(this.isAutoPlay())
.onAnimationStart((index: number, targetIndex: number) => {
// Logger.info(TAG, `Swiper onAnimationStart index : ${index}, targetIndex: ${targetIndex}`);
this.swiperIndex = targetIndex
})
}
.borderRadius($r('app.float.image_border_radius'))
.displayCount(this.buildDisplayCount()) // 仅展示1个图片
.cachedCount(2)
.index(0) // The default index of Swiper.
.indicator(false)
.loop(true)
.vertical(false)
.curve(Curve.Linear)
.autoPlay(this.isAutoPlay())
.onAnimationStart((index: number, targetIndex: number) => {
// Logger.info(TAG, `Swiper onAnimationStart index : ${index}, targetIndex: ${targetIndex}`);
this.swiperIndex = targetIndex
})
.onChange((index: number) => {
// Logger.info(TAG, `Swiper onChange index : ${index}`);
.onChange((index: number) => {
// Logger.info(TAG, `Swiper onChange index : ${index}`);
})
.onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
this.firstWd = 12
setTimeout(() => {
this.SecondWd = 12
}, 2000)
// console.info("onAnimationEnd, index: " + index)
})
})
.onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
this.firstWd = 12
setTimeout(() => {
this.SecondWd = 12
}, 2000)
// console.info("onAnimationEnd, index: " + index)
})
if (this.compDTO?.operDataList.length > 1) {
// 自定义indicator
GridRow({
columns: this.data.totalCount(),
gutter: { x: 2 }
}) {
LazyForEach(this.data, (item: string, index: number) => {
GridCol() {
if (index === this.swiperIndex) {
indicatorAnimations({
index: index,
isAutoPlay: this.isAutoPlay()
})
} else {
Row() {
Image($r('app.media.swiper_indicator_gray'))
.width('100%')
.height(2)
if (this.compDTO?.operDataList.length > 1) {
// 自定义indicator
GridRow({
columns: this.data.totalCount(),
gutter: { x: 2 }
}) {
LazyForEach(this.data, (item: string, index: number) => {
GridCol() {
if (index === this.swiperIndex) {
indicatorAnimations({
index: index,
isAutoPlay: this.isAutoPlay()
})
} else {
Row() {
Image($r('app.media.swiper_indicator_gray'))
.width('100%')
.height(2)
}
}
}
}
}, (item: string) => item)
}, (item: string) => item)
}
.width(CommonConstants.FULL_PARENT)
.padding({
left: 10,
right: 10,
top: 12,
bottom: 12
})
.alignItems(ItemAlign.End)
}
.width(CommonConstants.FULL_PARENT)
}
.alignContent(Alignment.BottomEnd)
.padding({
left: 10,
right: 10,
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.backgroundColor(0xffffff)
.width(CommonConstants.FULL_WIDTH)
} else {
CarouselLayout01CardView({
item: this.compDTO.operDataList[0],
length: 1,
showPicBorderRadius: this.compDTO.operDataList.length == 1
})
.onClick((event: ClickEvent) => {
InfomationCardClick.track(this.compDTO, this.compDTO.operDataList[0], this.pageId, this.pageName)
ProcessUtils.processPage(this.compDTO.operDataList[0])
})
.padding({
left: 10,
right: 10,
top: 12,
bottom: 12
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.alignItems(ItemAlign.End)
}
.backgroundColor(0xffffff)
.width(CommonConstants.FULL_WIDTH)
.borderRadius($r('app.float.image_border_radius'))
}
.alignContent(Alignment.BottomEnd)
.padding({
left: 10,
right: 10,
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.backgroundColor(0xffffff)
.width(CommonConstants.FULL_WIDTH)
} else {
EmptyComponent({ emptyHeight: 200 })
}
... ...