本地图片轮播

+import { PhotoListBean } from 'wdBean/Index';
+import { Logger } from 'wdKit/Index';
+import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
+import { display } from '@kit.ArkUI';
+
+const TAG = 'ImageSwiperComponent';
+
+@Component
+export struct ImageSwiperComponent {
+  @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
+  private scroller: Scroller = new Scroller()
+  @State swiperIndex: number = 0;
+  photoList: PhotoListBean[] = [];
+  private swiperController: SwiperController = new SwiperController()
+  private displayTool = display.getDefaultDisplaySync()
+  private screenWidth: number = 0
+  private picWidth: number = 0
+  @State picHeight: number = 0
+
+  //watch监听页码回调
+  onCurrentPageNumUpdated(): void {
+    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
+    let _swiperIndex = Number.parseInt(this.currentPageNum)
+    Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
+    this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
+  }
+
+  aboutToAppear(): void {
+    //获取宽高尺寸
+    this.screenWidth = this.displayTool.width
+    // this.picWidth = this.screenWidth - vp2px(52)
+    this.picWidth = this.screenWidth
+    this.picHeight = this.picWidth * 578 / 375
+  }
+
+  build() {
+    RelativeContainer() {
+      if (this.photoList && this.photoList?.length > 0) {
+        Swiper(this.swiperController) {
+          ForEach(this.photoList, (item: PhotoListBean) => {
+            MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
+          })
+        }
+        .index(this.swiperIndex)
+        .width('100%')
+        .height(px2vp(this.picHeight) + 32)
+        .vertical(false)
+        .autoPlay(false)
+        .cachedCount(3)
+        .indicator(false)
+        .displayCount(1)
+        .id('e_swiper_content')
+        .alignRules({
+          center: { anchor: "__container__", align: VerticalAlign.Center },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        })
+        .onChange((index: number) => {
+          this.swiperIndex = index
+        })
+
+        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.photoList.length}`)
+                    .fontSize(14)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(19)
+                }.fontColor(Color.White).margin(4)
+              }
+            }
+            .width('100%')
+            .margin({
+              top: 8,
+              left: 18,
+              bottom: 24,
+              right: 18
+            })
+          }
+          .scrollable(ScrollDirection.Vertical)
+          .scrollBarWidth(0)
+        }
+        .id('e_swiper_titles')
+        .alignRules({
+          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        })
+      }
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Black)
+    .id('e_picture_container')
+    // 设置顶部绘制延伸到状态栏
+    // 设置底部绘制延伸到导航条
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+  }
+}