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

@@ -27,11 +27,13 @@ export struct MultiPictureDetailPageComponent {
   private screenWidth: number = 0
   private picWidth: number = 0
   @State picHeight: number = 0
+  @State titleHeight: number = 0
   @State contentDetailData: ContentDetailDTO  = {} as ContentDetailDTO
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   private swiperController: SwiperController = new SwiperController()
   @State swiperIndex: number = 0;
   @Provide followStatus: string = '0' // 关注状态
+  private scroller: Scroller = new Scroller()
 
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
@@ -47,7 +49,8 @@ export struct MultiPictureDetailPageComponent {
     this.screenWidth = this.displayTool.width
     // this.picWidth = this.screenWidth - vp2px(52)
     this.picWidth = this.screenWidth
-    this.picHeight = this.picWidth * 566 / 378
+    this.picHeight = this.picWidth * 578 / 375
+    this.titleHeight = this.screenWidth * 178 / 375
     //注册字体
     font.registerFont({
       familyName: 'BebasNeue_Regular',
@@ -74,7 +77,7 @@ export struct MultiPictureDetailPageComponent {
         }
         .index(this.swiperIndex)
         .width('100%')
-        .height(px2vp(this.picHeight))
+        .height(px2vp(this.picHeight) + 32)
         .vertical(false)
         .autoPlay(false)
         .cachedCount(3)
@@ -82,7 +85,7 @@ export struct MultiPictureDetailPageComponent {
         .displayCount(1)
         .id('e_swiper_content')
         .alignRules({
-          top: { anchor: "__container__", align: VerticalAlign.Top },
+          center: { anchor: "__container__", align: VerticalAlign.Center },
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
         .onChange((index: number) => {
@@ -166,7 +169,8 @@ export struct MultiPictureDetailPageComponent {
           })
           .id('e_attention')
         }
-
+        Row(){
+          Scroll(this.scroller) {
             Row() {
               Flex({
                 direction: FlexDirection.Column,
@@ -194,22 +198,27 @@ export struct MultiPictureDetailPageComponent {
                     bottom: 4,
                     right: 18
                   })
-              .maxLines(3)
+                  .maxLines(16)
               }
             }
             .width('100%')
-        .height(178)
             .margin ({
               top: 8,
               left: 18,
-          bottom: 8,
+              bottom: 24,
               right: 18
             })
+          }
+          .scrollable(ScrollDirection.Vertical)
+          .scrollBarWidth(0)
+          .height(px2vp(this.titleHeight))
+        }
         .id('e_swiper_titles')
         .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({
           contentDetailData: this.contentDetailData,
@@ -218,7 +227,12 @@ export struct MultiPictureDetailPageComponent {
             bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
             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' })
           .id('e_oper_row')
       }