wangyong_wd

fix:修复轮播图:1、单张图片不显示底部indicator;2、轮播图数量超过9,indicator显示字数问题;3、直播信息,左上角显示直播状态

... ... @@ -4,6 +4,7 @@ import { BreakPointType, Logger } from 'wdKit';
import { CompUtils } from '../../utils/CompUtils';
import { ProcessUtils } from 'wdRouter';
import { EmptyComponent } from '../view/EmptyComponent';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
const TAG = 'Zh_Carousel_Layout-01';
... ... @@ -73,7 +74,7 @@ export struct ZhCarouselLayout01 {
ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
CarouselLayout01CardView({
item: item,
index: index
length: this.compDTO.operDataList.length
})
})
}
... ... @@ -102,36 +103,38 @@ export struct ZhCarouselLayout01 {
console.info("onAnimationEnd, index: " + index)
})
// 自定义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)
.padding({
left: 10,
right: 10,
top: 12,
bottom: 12
})
.alignItems(ItemAlign.End)
}
.alignContent(Alignment.BottomEnd)
.width(CommonConstants.FULL_WIDTH)
... ... @@ -159,7 +162,7 @@ export struct ZhCarouselLayout01 {
@Component
struct CarouselLayout01CardView {
private item: ContentDTO = {} as ContentDTO;
private index: number = -1;
private length: number = 1; // 轮播图数量
build() {
Stack() {
... ... @@ -167,6 +170,7 @@ struct CarouselLayout01CardView {
.width(CommonConstants.FULL_PARENT)
.height(CommonConstants.FULL_PARENT)
.objectFit(ImageFit.Cover)
Row()
.width(CommonConstants.FULL_PARENT)
.height(60)
... ... @@ -174,24 +178,34 @@ struct CarouselLayout01CardView {
direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
})
// 文本信息
Text(`${this.item.corner}${this.item.newsTitle}`)
.width(CommonConstants.FULL_PARENT)
.height(39)
.padding({
left: 10,
right: 10
})
.margin({
bottom: 28
})
.fontColor(Color.White)
.fontSize($r('app.float.font_size_16'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
.align(Alignment.Bottom)
.maxLines(CompUtils.MAX_LINES_2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Column() {
// 这里用于展示轮播图右上角信息,这里只对直播类型的展示
if (this.item.objectType === '2') {
CardMediaInfo({ contentDTO: this.item })
.width(CommonConstants.FULL_PARENT)
}
Blank()
// 文本信息
Text(`${this.item.corner}${this.item.newsTitle}`)
.width(CommonConstants.FULL_PARENT)
.height(39)
.padding({
left: 10,
right: 10
})
.margin({
bottom: this.length > 1 ? 28 : 10
})
.fontColor(Color.White)
.fontSize($r('app.float.font_size_16'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
.align(Alignment.Bottom)
.maxLines(CompUtils.MAX_LINES_2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width(CommonConstants.FULL_PARENT)
.height(CommonConstants.FULL_PARENT)
}
.width(CommonConstants.FULL_WIDTH)
.aspectRatio(CompUtils.ASPECT_RATIO_2_1)
... ... @@ -244,7 +258,7 @@ struct indicatorAnimations {
.width('100%')
.alignContent(Alignment.Start)
Text(`0${this.index + 1}`)
Text(this.index + 1 < 10 ? `0${this.index + 1}` : `${this.index + 1}`)
.fontSize(this.centerFontSize)
.fontColor($r('app.color.white'))
.width(16)
... ...