多图（图集）详情页 底部titles代码手机端适配

@@ -27,11 +27,13 @@ export struct MultiPictureDetailPageComponent {
   private screenWidth: number = 0
   private screenWidth: number = 0
   private picWidth: number = 0
   private picWidth: number = 0
   @State picHeight: number = 0
   @State picHeight: number = 0
+  @State titleHeight: number = 0
   @State contentDetailData: ContentDetailDTO  = {} as ContentDetailDTO
   @State contentDetailData: ContentDetailDTO  = {} as ContentDetailDTO
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   private swiperController: SwiperController = new SwiperController()
   private swiperController: SwiperController = new SwiperController()
   @State swiperIndex: number = 0;
   @State swiperIndex: number = 0;
   @Provide followStatus: string = '0' // 关注状态
   @Provide followStatus: string = '0' // 关注状态
+  private scroller: Scroller = new Scroller()
 
 
   //watch监听页码回调
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
   onCurrentPageNumUpdated(): void {
@@ -47,7 +49,8 @@ export struct MultiPictureDetailPageComponent {
     this.screenWidth = this.displayTool.width
     this.screenWidth = this.displayTool.width
     // this.picWidth = this.screenWidth - vp2px(52)
     // this.picWidth = this.screenWidth - vp2px(52)
     this.picWidth = this.screenWidth
     this.picWidth = this.screenWidth
-    this.picHeight = this.picWidth * 566 / 378
+    this.picHeight = this.picWidth * 578 / 375
+    this.titleHeight = this.screenWidth * 178 / 375
     //注册字体
     //注册字体
     font.registerFont({
     font.registerFont({
       familyName: 'BebasNeue_Regular',
       familyName: 'BebasNeue_Regular',
@@ -74,7 +77,7 @@ export struct MultiPictureDetailPageComponent {
         }
         }
         .index(this.swiperIndex)
         .index(this.swiperIndex)
         .width('100%')
         .width('100%')
-        .height(px2vp(this.picHeight))
+        .height(px2vp(this.picHeight) + 32)
         .vertical(false)
         .vertical(false)
         .autoPlay(false)
         .autoPlay(false)
         .cachedCount(3)
         .cachedCount(3)
@@ -82,7 +85,7 @@ export struct MultiPictureDetailPageComponent {
         .displayCount(1)
         .displayCount(1)
         .id('e_swiper_content')
         .id('e_swiper_content')
         .alignRules({
         .alignRules({
-          top: { anchor: "__container__", align: VerticalAlign.Top },
+          center: { anchor: "__container__", align: VerticalAlign.Center },
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
         })
         .onChange((index: number) => {
         .onChange((index: number) => {
@@ -166,50 +169,56 @@ export struct MultiPictureDetailPageComponent {
           })
           })
           .id('e_attention')
           .id('e_attention')
         }
         }
+        Row(){
+          Scroll(this.scroller) {
+            Row() {
+              Flex({
+                direction: FlexDirection.Column,
+                justifyContent: FlexAlign.Start
+              }) {
+                Text() {
+                  Span(`${this.swiperIndex + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
+                  Span(`/${this.contentDetailData.photoList.length}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
+                }.fontColor(Color.White).margin(4)
 
 
-        Row() {
-          Flex({
-            direction: FlexDirection.Column,
-            justifyContent: FlexAlign.Start
-          }) {
-            Text() {
-              Span(`${this.swiperIndex + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
-              Span(`/${this.contentDetailData.photoList.length}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
-            }.fontColor(Color.White).margin(4)
-
-            Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
-              .fontWeight(600).lineHeight(24)
-              .margin ({
-                top: 4,
-                left: 0,
-                bottom: 4,
-                right: 0
-              })
-            Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`).fontColor(Color.White)
-              .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22)
-              .textOverflow({ overflow: TextOverflow.Ellipsis })
-              .margin ({
-                top: 4,
-                left: 0,
-                bottom: 4,
-                right: 18
-              })
-              .maxLines(3)
+                Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
+                  .fontWeight(600).lineHeight(24)
+                  .margin ({
+                    top: 4,
+                    left: 0,
+                    bottom: 4,
+                    right: 0
+                  })
+                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`).fontColor(Color.White)
+                  .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  .margin ({
+                    top: 4,
+                    left: 0,
+                    bottom: 4,
+                    right: 18
+                  })
+                  .maxLines(16)
+              }
+            }
+            .width('100%')
+            .margin ({
+              top: 8,
+              left: 18,
+              bottom: 24,
+              right: 18
+            })
           }
           }
+          .scrollable(ScrollDirection.Vertical)
+          .scrollBarWidth(0)
+          .height(px2vp(this.titleHeight))
         }
         }
-        .width('100%')
-        .height(178)
-        .margin ({
-          top: 8,
-          left: 18,
-          bottom: 8,
-          right: 18
-        })
         .id('e_swiper_titles')
         .id('e_swiper_titles')
         .alignRules({
         .alignRules({
-          bottom: { anchor: "e_swiper_content", align: VerticalAlign.Bottom },
-          middle: { anchor: "e_swiper_content", align: HorizontalAlign.Center }
+          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
         })
+        .height(px2vp(this.titleHeight) + 64)
 
 
         OperRowListView({
         OperRowListView({
           contentDetailData: this.contentDetailData,
           contentDetailData: this.contentDetailData,
@@ -218,7 +227,12 @@ export struct MultiPictureDetailPageComponent {
             bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
             bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
           })
           })
-          .width('100%').height(56).margin(16)
+          .width('100%').height(56).margin({
+          top: 16,
+          left: 16,
+          right:16,
+          bottom: 0
+        })
           .border({ width: {top: 0.5}, color: '#FFFFFF' })
           .border({ width: {top: 0.5}, color: '#FFFFFF' })
           .id('e_oper_row')
           .id('e_oper_row')
       }
       }