Showing
2 changed files
with
46 additions
and
44 deletions
| @@ -5,9 +5,6 @@ const TAG = 'MultiPictureDetailPageComponent'; | @@ -5,9 +5,6 @@ const TAG = 'MultiPictureDetailPageComponent'; | ||
| 5 | 5 | ||
| 6 | @Component | 6 | @Component |
| 7 | export struct MultiPictureDetailItemComponent { | 7 | export struct MultiPictureDetailItemComponent { |
| 8 | - private photoListLength: number = 1; | ||
| 9 | - private index: number = 1; | ||
| 10 | - private newsTitle: string = ''; | ||
| 11 | private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean | 8 | private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean |
| 12 | 9 | ||
| 13 | 10 | ||
| @@ -28,45 +25,6 @@ export struct MultiPictureDetailItemComponent { | @@ -28,45 +25,6 @@ export struct MultiPictureDetailItemComponent { | ||
| 28 | .height('100%') | 25 | .height('100%') |
| 29 | .width('100%') | 26 | .width('100%') |
| 30 | 27 | ||
| 31 | - | ||
| 32 | - Row() { | ||
| 33 | - Flex({ | ||
| 34 | - direction: FlexDirection.Column, | ||
| 35 | - justifyContent: FlexAlign.Start | ||
| 36 | - }) { | ||
| 37 | - Text() { | ||
| 38 | - Span(`${this.index + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28) | ||
| 39 | - Span(`/${this.photoListLength}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19) | ||
| 40 | - }.fontColor(Color.White).margin(4) | ||
| 41 | - | ||
| 42 | - Text(`${this.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold') | ||
| 43 | - .fontWeight(600).lineHeight(24) | ||
| 44 | - .margin ({ | ||
| 45 | - top: 4, | ||
| 46 | - left: 0, | ||
| 47 | - bottom: 4, | ||
| 48 | - right: 0 | ||
| 49 | - }) | ||
| 50 | - Text(`${this.MultiPictureDetailItem.picDesc}`).fontColor(Color.White) | ||
| 51 | - .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22) | ||
| 52 | - .textOverflow({ overflow: TextOverflow.Ellipsis }) | ||
| 53 | - .margin ({ | ||
| 54 | - top: 4, | ||
| 55 | - left: 0, | ||
| 56 | - bottom: 4, | ||
| 57 | - right: 18 | ||
| 58 | - }) | ||
| 59 | - } | ||
| 60 | - } | ||
| 61 | - .width('100%') | ||
| 62 | - .height(178) | ||
| 63 | - .margin ({ | ||
| 64 | - top: 8, | ||
| 65 | - left: 18, | ||
| 66 | - bottom: 8, | ||
| 67 | - right: 18 | ||
| 68 | - }) | ||
| 69 | - | ||
| 70 | } | 28 | } |
| 71 | .backgroundColor(Color.Black) | 29 | .backgroundColor(Color.Black) |
| 72 | .width('100%') | 30 | .width('100%') |
| @@ -68,8 +68,8 @@ export struct MultiPictureDetailPageComponent { | @@ -68,8 +68,8 @@ export struct MultiPictureDetailPageComponent { | ||
| 68 | RelativeContainer() { | 68 | RelativeContainer() { |
| 69 | if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) { | 69 | if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) { |
| 70 | Swiper(this.swiperController) { | 70 | Swiper(this.swiperController) { |
| 71 | - ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => { | ||
| 72 | - MultiPictureDetailItemComponent({ photoListLength: this.contentDetailData.photoList?.length , index: index, newsTitle: this.contentDetailData.newsTitle, MultiPictureDetailItem: item }) | 71 | + ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => { |
| 72 | + MultiPictureDetailItemComponent({ MultiPictureDetailItem: item }) | ||
| 73 | }) | 73 | }) |
| 74 | } | 74 | } |
| 75 | .index(this.swiperIndex) | 75 | .index(this.swiperIndex) |
| @@ -167,6 +167,50 @@ export struct MultiPictureDetailPageComponent { | @@ -167,6 +167,50 @@ export struct MultiPictureDetailPageComponent { | ||
| 167 | .id('e_attention') | 167 | .id('e_attention') |
| 168 | } | 168 | } |
| 169 | 169 | ||
| 170 | + Row() { | ||
| 171 | + Flex({ | ||
| 172 | + direction: FlexDirection.Column, | ||
| 173 | + justifyContent: FlexAlign.Start | ||
| 174 | + }) { | ||
| 175 | + Text() { | ||
| 176 | + Span(`${this.swiperIndex + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28) | ||
| 177 | + Span(`/${this.contentDetailData.photoList.length}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19) | ||
| 178 | + }.fontColor(Color.White).margin(4) | ||
| 179 | + | ||
| 180 | + Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold') | ||
| 181 | + .fontWeight(600).lineHeight(24) | ||
| 182 | + .margin ({ | ||
| 183 | + top: 4, | ||
| 184 | + left: 0, | ||
| 185 | + bottom: 4, | ||
| 186 | + right: 0 | ||
| 187 | + }) | ||
| 188 | + Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`).fontColor(Color.White) | ||
| 189 | + .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22) | ||
| 190 | + .textOverflow({ overflow: TextOverflow.Ellipsis }) | ||
| 191 | + .margin ({ | ||
| 192 | + top: 4, | ||
| 193 | + left: 0, | ||
| 194 | + bottom: 4, | ||
| 195 | + right: 18 | ||
| 196 | + }) | ||
| 197 | + .maxLines(3) | ||
| 198 | + } | ||
| 199 | + } | ||
| 200 | + .width('100%') | ||
| 201 | + .height(178) | ||
| 202 | + .margin ({ | ||
| 203 | + top: 8, | ||
| 204 | + left: 18, | ||
| 205 | + bottom: 8, | ||
| 206 | + right: 18 | ||
| 207 | + }) | ||
| 208 | + .id('e_swiper_titles') | ||
| 209 | + .alignRules({ | ||
| 210 | + bottom: { anchor: "e_swiper_content", align: VerticalAlign.Bottom }, | ||
| 211 | + middle: { anchor: "e_swiper_content", align: HorizontalAlign.Center } | ||
| 212 | + }) | ||
| 213 | + | ||
| 170 | OperRowListView({ | 214 | OperRowListView({ |
| 171 | contentDetailData: this.contentDetailData, | 215 | contentDetailData: this.contentDetailData, |
| 172 | }) | 216 | }) |
-
Please register or login to post a comment