fix:修复轮播图:1、单张图片不显示底部indicator;2、轮播图数量超过9,indicator显示字数问题;3、直播信息,左上角显示直播状态
Showing
1 changed file
with
62 additions
and
48 deletions
| @@ -4,6 +4,7 @@ import { BreakPointType, Logger } from 'wdKit'; | @@ -4,6 +4,7 @@ import { BreakPointType, Logger } from 'wdKit'; | ||
| 4 | import { CompUtils } from '../../utils/CompUtils'; | 4 | import { CompUtils } from '../../utils/CompUtils'; |
| 5 | import { ProcessUtils } from 'wdRouter'; | 5 | import { ProcessUtils } from 'wdRouter'; |
| 6 | import { EmptyComponent } from '../view/EmptyComponent'; | 6 | import { EmptyComponent } from '../view/EmptyComponent'; |
| 7 | +import { CardMediaInfo } from '../cardCommon/CardMediaInfo' | ||
| 7 | 8 | ||
| 8 | const TAG = 'Zh_Carousel_Layout-01'; | 9 | const TAG = 'Zh_Carousel_Layout-01'; |
| 9 | 10 | ||
| @@ -73,7 +74,7 @@ export struct ZhCarouselLayout01 { | @@ -73,7 +74,7 @@ export struct ZhCarouselLayout01 { | ||
| 73 | ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => { | 74 | ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => { |
| 74 | CarouselLayout01CardView({ | 75 | CarouselLayout01CardView({ |
| 75 | item: item, | 76 | item: item, |
| 76 | - index: index | 77 | + length: this.compDTO.operDataList.length |
| 77 | }) | 78 | }) |
| 78 | }) | 79 | }) |
| 79 | } | 80 | } |
| @@ -102,36 +103,38 @@ export struct ZhCarouselLayout01 { | @@ -102,36 +103,38 @@ export struct ZhCarouselLayout01 { | ||
| 102 | console.info("onAnimationEnd, index: " + index) | 103 | console.info("onAnimationEnd, index: " + index) |
| 103 | }) | 104 | }) |
| 104 | 105 | ||
| 105 | - // 自定义indicator | ||
| 106 | - GridRow({ | ||
| 107 | - columns: this.data.totalCount(), | ||
| 108 | - gutter: { x: 2 } | ||
| 109 | - }) { | ||
| 110 | - LazyForEach(this.data, (item: string, index: number) => { | ||
| 111 | - GridCol() { | ||
| 112 | - if (index === this.swiperIndex) { | ||
| 113 | - indicatorAnimations({ | ||
| 114 | - index: index, | ||
| 115 | - isAutoPlay: this.isAutoPlay() | ||
| 116 | - }) | ||
| 117 | - } else { | ||
| 118 | - Row() { | ||
| 119 | - Image($r('app.media.swiper_indicator_gray')) | ||
| 120 | - .width('100%') | ||
| 121 | - .height(2) | 106 | + if (this.compDTO?.operDataList.length > 1) { |
| 107 | + // 自定义indicator | ||
| 108 | + GridRow({ | ||
| 109 | + columns: this.data.totalCount(), | ||
| 110 | + gutter: { x: 2 } | ||
| 111 | + }) { | ||
| 112 | + LazyForEach(this.data, (item: string, index: number) => { | ||
| 113 | + GridCol() { | ||
| 114 | + if (index === this.swiperIndex) { | ||
| 115 | + indicatorAnimations({ | ||
| 116 | + index: index, | ||
| 117 | + isAutoPlay: this.isAutoPlay() | ||
| 118 | + }) | ||
| 119 | + } else { | ||
| 120 | + Row() { | ||
| 121 | + Image($r('app.media.swiper_indicator_gray')) | ||
| 122 | + .width('100%') | ||
| 123 | + .height(2) | ||
| 124 | + } | ||
| 122 | } | 125 | } |
| 123 | } | 126 | } |
| 124 | - } | ||
| 125 | - }, (item: string) => item) | 127 | + }, (item: string) => item) |
| 128 | + } | ||
| 129 | + .width(CommonConstants.FULL_PARENT) | ||
| 130 | + .padding({ | ||
| 131 | + left: 10, | ||
| 132 | + right: 10, | ||
| 133 | + top: 12, | ||
| 134 | + bottom: 12 | ||
| 135 | + }) | ||
| 136 | + .alignItems(ItemAlign.End) | ||
| 126 | } | 137 | } |
| 127 | - .width(CommonConstants.FULL_PARENT) | ||
| 128 | - .padding({ | ||
| 129 | - left: 10, | ||
| 130 | - right: 10, | ||
| 131 | - top: 12, | ||
| 132 | - bottom: 12 | ||
| 133 | - }) | ||
| 134 | - .alignItems(ItemAlign.End) | ||
| 135 | } | 138 | } |
| 136 | .alignContent(Alignment.BottomEnd) | 139 | .alignContent(Alignment.BottomEnd) |
| 137 | .width(CommonConstants.FULL_WIDTH) | 140 | .width(CommonConstants.FULL_WIDTH) |
| @@ -159,7 +162,7 @@ export struct ZhCarouselLayout01 { | @@ -159,7 +162,7 @@ export struct ZhCarouselLayout01 { | ||
| 159 | @Component | 162 | @Component |
| 160 | struct CarouselLayout01CardView { | 163 | struct CarouselLayout01CardView { |
| 161 | private item: ContentDTO = {} as ContentDTO; | 164 | private item: ContentDTO = {} as ContentDTO; |
| 162 | - private index: number = -1; | 165 | + private length: number = 1; // 轮播图数量 |
| 163 | 166 | ||
| 164 | build() { | 167 | build() { |
| 165 | Stack() { | 168 | Stack() { |
| @@ -167,6 +170,7 @@ struct CarouselLayout01CardView { | @@ -167,6 +170,7 @@ struct CarouselLayout01CardView { | ||
| 167 | .width(CommonConstants.FULL_PARENT) | 170 | .width(CommonConstants.FULL_PARENT) |
| 168 | .height(CommonConstants.FULL_PARENT) | 171 | .height(CommonConstants.FULL_PARENT) |
| 169 | .objectFit(ImageFit.Cover) | 172 | .objectFit(ImageFit.Cover) |
| 173 | + | ||
| 170 | Row() | 174 | Row() |
| 171 | .width(CommonConstants.FULL_PARENT) | 175 | .width(CommonConstants.FULL_PARENT) |
| 172 | .height(60) | 176 | .height(60) |
| @@ -174,24 +178,34 @@ struct CarouselLayout01CardView { | @@ -174,24 +178,34 @@ struct CarouselLayout01CardView { | ||
| 174 | direction: GradientDirection.Top, // 渐变方向:to Top/从下往上 | 178 | direction: GradientDirection.Top, // 渐变方向:to Top/从下往上 |
| 175 | colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]] | 179 | colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]] |
| 176 | }) | 180 | }) |
| 177 | - // 文本信息 | ||
| 178 | - Text(`${this.item.corner}${this.item.newsTitle}`) | ||
| 179 | - .width(CommonConstants.FULL_PARENT) | ||
| 180 | - .height(39) | ||
| 181 | - .padding({ | ||
| 182 | - left: 10, | ||
| 183 | - right: 10 | ||
| 184 | - }) | ||
| 185 | - .margin({ | ||
| 186 | - bottom: 28 | ||
| 187 | - }) | ||
| 188 | - .fontColor(Color.White) | ||
| 189 | - .fontSize($r('app.float.font_size_16')) | ||
| 190 | - .fontWeight(FontWeight.Medium) | ||
| 191 | - .textAlign(TextAlign.Start) | ||
| 192 | - .align(Alignment.Bottom) | ||
| 193 | - .maxLines(CompUtils.MAX_LINES_2) | ||
| 194 | - .textOverflow({ overflow: TextOverflow.Ellipsis }) | 181 | + Column() { |
| 182 | + // 这里用于展示轮播图右上角信息,这里只对直播类型的展示 | ||
| 183 | + if (this.item.objectType === '2') { | ||
| 184 | + CardMediaInfo({ contentDTO: this.item }) | ||
| 185 | + .width(CommonConstants.FULL_PARENT) | ||
| 186 | + } | ||
| 187 | + Blank() | ||
| 188 | + // 文本信息 | ||
| 189 | + Text(`${this.item.corner}${this.item.newsTitle}`) | ||
| 190 | + .width(CommonConstants.FULL_PARENT) | ||
| 191 | + .height(39) | ||
| 192 | + .padding({ | ||
| 193 | + left: 10, | ||
| 194 | + right: 10 | ||
| 195 | + }) | ||
| 196 | + .margin({ | ||
| 197 | + bottom: this.length > 1 ? 28 : 10 | ||
| 198 | + }) | ||
| 199 | + .fontColor(Color.White) | ||
| 200 | + .fontSize($r('app.float.font_size_16')) | ||
| 201 | + .fontWeight(FontWeight.Medium) | ||
| 202 | + .textAlign(TextAlign.Start) | ||
| 203 | + .align(Alignment.Bottom) | ||
| 204 | + .maxLines(CompUtils.MAX_LINES_2) | ||
| 205 | + .textOverflow({ overflow: TextOverflow.Ellipsis }) | ||
| 206 | + } | ||
| 207 | + .width(CommonConstants.FULL_PARENT) | ||
| 208 | + .height(CommonConstants.FULL_PARENT) | ||
| 195 | } | 209 | } |
| 196 | .width(CommonConstants.FULL_WIDTH) | 210 | .width(CommonConstants.FULL_WIDTH) |
| 197 | .aspectRatio(CompUtils.ASPECT_RATIO_2_1) | 211 | .aspectRatio(CompUtils.ASPECT_RATIO_2_1) |
| @@ -244,7 +258,7 @@ struct indicatorAnimations { | @@ -244,7 +258,7 @@ struct indicatorAnimations { | ||
| 244 | .width('100%') | 258 | .width('100%') |
| 245 | .alignContent(Alignment.Start) | 259 | .alignContent(Alignment.Start) |
| 246 | 260 | ||
| 247 | - Text(`0${this.index + 1}`) | 261 | + Text(this.index + 1 < 10 ? `0${this.index + 1}` : `${this.index + 1}`) |
| 248 | .fontSize(this.centerFontSize) | 262 | .fontSize(this.centerFontSize) |
| 249 | .fontColor($r('app.color.white')) | 263 | .fontColor($r('app.color.white')) |
| 250 | .width(16) | 264 | .width(16) |
-
Please register or login to post a comment