王士厅

多图(图集)详情页 底部titles代码优化

@@ -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 })