修复视频频道切换问题

@@ -67,11 +67,10 @@ export struct BottomNavigationComponent {
               TopNavigationComponent({
               TopNavigationComponent({
                 groupId: navItem.id,
                 groupId: navItem.id,
                 topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
                 topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
-                _currentNavIndex: this.currentNavIndex,
+                _currentNavIndex: $currentNavIndex,
                 currentBottomNavName: navItem.name,
                 currentBottomNavName: navItem.name,
-                changeBarBackgroundColor: (color: Color) => {
-                  this.barBackgroundColor = color
-                }
+                barBackgroundColor: $barBackgroundColor
+
               })
               })
             }
             }
 
 
@@ -92,7 +91,8 @@ export struct BottomNavigationComponent {
       // this.onBottomNavigationIndexChange()
       // this.onBottomNavigationIndexChange()
     })
     })
     .backgroundColor(this.barBackgroundColor)
     .backgroundColor(this.barBackgroundColor)
-    .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致
+
+    // .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致
 
 
   }
   }
 
 

@@ -24,17 +24,15 @@ export struct TopNavigationComponent {
   private groupId: number = 0
   private groupId: number = 0
   private currentBottomNavName: string = ''
   private currentBottomNavName: string = ''
   private tabsController: TabsController = new TabsController()
   private tabsController: TabsController = new TabsController()
-  private changeBarBackgroundColor: (color: Color) => void = () => {
-  }
   @Consume isLayoutFullScreen: boolean
   @Consume isLayoutFullScreen: boolean
   @Consume bottomRectHeight: number
   @Consume bottomRectHeight: number
   @Consume topRectHeight: number
   @Consume topRectHeight: number
   @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
   @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
-  @State barBackgroundColor: Color = Color.Transparent
-  @Prop @Watch('indexChange') _currentNavIndex?: number;
+  @Link barBackgroundColor: Color
+  @Link _currentNavIndex?: number;
   // 顶导当前选中/焦点下标
   // 顶导当前选中/焦点下标
-  @State @Watch('indexChange') currentTopNavSelectedIndex: number = 0;
+  @State currentTopNavSelectedIndex: number = 0;
   // 顶导数据
   // 顶导数据
   @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
   @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
   @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
   @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@@ -151,29 +149,6 @@ export struct TopNavigationComponent {
     WDRouterRule.jumpWithAction(taskAction)
     WDRouterRule.jumpWithAction(taskAction)
   }
   }
 
 
-  indexChange() {
-
-    // 判断视频频道待处理
-    if (this._currentNavIndex === 2 && this.currentTopNavSelectedIndex == 0) {
-      this.barBackgroundColor = Color.Black
-      this.changeBarBackgroundColor && this.changeBarBackgroundColor(this.barBackgroundColor)
-      // WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })
-      // WindowModel.shared.setWindowLayoutFullScreen(true)
-      // this.isLayoutFullScreen = true
-      // this.bottomRectHeight = this.bottomSafeHeight
-      // this.topRectHeight = this.topSafeHeight
-
-    } else {
-      this.barBackgroundColor = Color.Transparent
-      this.changeBarBackgroundColor && this.changeBarBackgroundColor(this.barBackgroundColor)
-      // WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
-      // WindowModel.shared.setWindowLayoutFullScreen(false)
-      // this.isLayoutFullScreen = false
-      // this.bottomRectHeight = 0
-      // this.topRectHeight = 0
-    }
-  }
-
   build() {
   build() {
     Column() {
     Column() {
       // 顶部搜索、日报logo、早晚报
       // 顶部搜索、日报logo、早晚报
@@ -230,11 +205,12 @@ export struct TopNavigationComponent {
             TabContent() {
             TabContent() {
               if (this.currentBottomNavName === '视频' && navItem.name === '视频') {
               if (this.currentBottomNavName === '视频' && navItem.name === '视频') {
                 VideoChannelDetail({
                 VideoChannelDetail({
-                  bottomNavIndex: this._currentNavIndex,
-                  topNavIndex: this.currentTopNavSelectedIndex,
+                  bottomNavIndex: $_currentNavIndex,
+                  topNavIndex: $currentTopNavSelectedIndex,
                   groupId: this.groupId + '',
                   groupId: this.groupId + '',
                   pageId: navItem.pageId + '',
                   pageId: navItem.pageId + '',
                   channelId: navItem.channelId + '',
                   channelId: navItem.channelId + '',
+                  barBackgroundColor: $barBackgroundColor
                 })
                 })
               } else
               } else
                 if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
                 if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {

@@ -137,7 +137,6 @@ export struct DetailVideoListPage {
     Column() {
     Column() {
       Swiper(this.swiperController) {
       Swiper(this.swiperController) {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
-          Column() {
           DetailPlayShortVideoPage({
           DetailPlayShortVideoPage({
             switchVideoStatus: $switchVideoStatus,
             switchVideoStatus: $switchVideoStatus,
             contentDetailData: item,
             contentDetailData: item,
@@ -145,18 +144,15 @@ export struct DetailVideoListPage {
             index: index,
             index: index,
             interactData: this.interactDataList[index]
             interactData: this.interactDataList[index]
           })
           })
-          }.width('100%')
-          .height('100%')
-
         }, (item: ContentDetailDTO) => item.newsId + '')
         }, (item: ContentDetailDTO) => item.newsId + '')
       }
       }
-      .clip(false)
-      .cachedCount(-1)
       .indicator(false)
       .indicator(false)
       .vertical(true)
       .vertical(true)
       .loop(false)
       .loop(false)
       .width('100%')
       .width('100%')
       .height('100%')
       .height('100%')
+      .cachedCount(3)
+      .displayCount(1, true)
       .onChange((index: number) => {
       .onChange((index: number) => {
         this.currentIndex = index
         this.currentIndex = index
         console.info('onChange==', index.toString())
         console.info('onChange==', index.toString())

+import { Logger } from 'wdKit';
+
+const TAG = 'PictureLoading';
+
+@Component
+export struct PictureLoading {
+  private imagePath: string = ''
+  //alt app.media.picture_loading 设计稿尺寸
+  @State imageWidth: string | number = 167
+  @State ratio: number = 167 / 60
+
+  async aboutToAppear() {
+    Logger.info(TAG, 'pictures preview')
+  }
+
+  build() {
+    Row() {
+      Image(this.imagePath)
+        .alt($r('app.media.picture_loading'))
+        .width(this.imageWidth)
+        .aspectRatio(this.ratio)
+        .objectFit(ImageFit.Fill)
+        .interpolation(ImageInterpolation.High)
+        .onComplete((event) => {
+          if (event) {
+            this.imageWidth = '100%'
+            this.ratio = event.width / event.height
+          }
+
+        })
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundColor(Color.Black)
+    .justifyContent(FlexAlign.Center)
+  }
+}

@@ -14,6 +14,7 @@ import {
 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
 import { Logger, WindowModel } from 'wdKit/Index';
 import { Logger, WindowModel } from 'wdKit/Index';
 import { BusinessError } from '@kit.BasicServicesKit';
 import { BusinessError } from '@kit.BasicServicesKit';
+import { PictureLoading } from './PictureLoading';
 
 
 interface loadMoreData {
 interface loadMoreData {
   pageNum: number;
   pageNum: number;
@@ -39,6 +40,7 @@ export struct VideoChannelDetail {
   // private recommend?: string = '' // 0.非推荐，1.推荐；
   // private recommend?: string = '' // 0.非推荐，1.推荐；
   @Link @Watch('navIndexChange') bottomNavIndex: number
   @Link @Watch('navIndexChange') bottomNavIndex: number
   @Link @Watch('navIndexChange') topNavIndex: number
   @Link @Watch('navIndexChange') topNavIndex: number
+  @Link barBackgroundColor: Color
   private swiperController: SwiperController = new SwiperController()
   private swiperController: SwiperController = new SwiperController()
   @Provide showComment: boolean = false
   @Provide showComment: boolean = false
   @State data: ContentDetailDTO[] = []
   @State data: ContentDetailDTO[] = []
@@ -46,26 +48,29 @@ export struct VideoChannelDetail {
   @State interactDataList: InteractDataDTO[] = []
   @State interactDataList: InteractDataDTO[] = []
   @State totalCount: number = 0
   @State totalCount: number = 0
   @State switchVideoStatus: boolean = false
   @State switchVideoStatus: boolean = false
+  @State isMouted: boolean = false
 
 
   /**
   /**
    * 监听视频频道激活或失活
    * 监听视频频道激活或失活
    */
    */
   navIndexChange() {
   navIndexChange() {
-    if (timer) clearTimeout(timer)
+    // if (timer) clearTimeout(timer)
+    console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
+    // timer = setTimeout(() => {
 
 
-    timer = setTimeout(() => {
     if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
     if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
       // 如果视频在暂停则播放视频
       // 如果视频在暂停则播放视频
       this.switchVideoStatus = true
       this.switchVideoStatus = true
-        WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', statusBarColor: '#000000' })
+      this.barBackgroundColor = Color.Black
+      this.openFullScreen()
     } else {
     } else {
       // 如果视频在播放则暂停视频
       // 如果视频在播放则暂停视频
       this.switchVideoStatus = false
       this.switchVideoStatus = false
-        WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', statusBarColor: '#ffffff' })
-        // WindowModel.shared.setWindowLayoutFullScreen(false)
+      this.barBackgroundColor = Color.Transparent
+      this.closeFullScreen()
     }
     }
-      timer = -1
-    }, 100)
+    //   timer = -1
+    // }, 100)
 
 
 
 
   }
   }
@@ -82,22 +87,27 @@ export struct VideoChannelDetail {
     Logger.info(TAG, 'aboutToDisappear');
     Logger.info(TAG, 'aboutToDisappear');
   }
   }
 
 
-  // onPageShow(): void {
-  //   this.openFullScreen()
-  //   Logger.info(TAG, 'onPageShow');
-  // }
-  //
-  // onPageHide(): void {
-  //   this.closeFullScreen()
-  //   Logger.info(TAG, 'onPageHide');
-  // }
+  onPageShow(): void {
+    this.openFullScreen()
+    Logger.info(TAG, 'onPageShow');
+  }
+
+  onPageHide(): void {
+    this.closeFullScreen()
+    Logger.info(TAG, 'onPageHide');
+  }
 
 
   /**
   /**
    * 开启沉浸式
    * 开启沉浸式
    * TODO:颜色待根据业务接口修改
    * TODO:颜色待根据业务接口修改
    */
    */
   openFullScreen() {
   openFullScreen() {
-    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })
+    WindowModel.shared.setWindowSystemBarProperties({
+      statusBarContentColor: '#ffffff',
+      statusBarColor: '#000000',
+      // navigationBarColor: '#000000',
+      // navigationBarContentColor: '#ffffff'
+    })
     // WindowModel.shared.setWindowLayoutFullScreen(true)
     // WindowModel.shared.setWindowLayoutFullScreen(true)
     // WindowModel.shared.setWindowSystemBarEnable([])
     // WindowModel.shared.setWindowSystemBarEnable([])
   }
   }
@@ -107,7 +117,13 @@ export struct VideoChannelDetail {
    * TODO:颜色待根据业务接口修改
    * TODO:颜色待根据业务接口修改
    */
    */
   closeFullScreen() {
   closeFullScreen() {
-    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
+    WindowModel.shared.setWindowSystemBarProperties({
+      statusBarContentColor: '#000000',
+      statusBarColor: '#ffffff',
+      // navigationBarColor: '#0x66000000',
+      // navigationBarContentColor: '#0xE5FFFFFF'
+
+    })
     // WindowModel.shared.setWindowLayoutFullScreen(false)
     // WindowModel.shared.setWindowLayoutFullScreen(false)
     // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
     // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
   }
   }
@@ -162,6 +178,9 @@ export struct VideoChannelDetail {
 
 
       this.batchContentDetail(list1)
       this.batchContentDetail(list1)
       this.getContentInteract(list2)
       this.getContentInteract(list2)
+      setTimeout(() => {
+        this.isMouted = true
+      }, 500)
 
 
     })
     })
   }
   }
@@ -192,6 +211,7 @@ export struct VideoChannelDetail {
 
 
   build() {
   build() {
     Column() {
     Column() {
+      PictureLoading().visibility(this.isMouted ? Visibility.None : Visibility.Visible)
       Swiper(this.swiperController) {
       Swiper(this.swiperController) {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
           Column() {
           Column() {
@@ -206,6 +226,7 @@ export struct VideoChannelDetail {
           .height('100%')
           .height('100%')
         }, (item: ContentDetailDTO) => item.newsId + '')
         }, (item: ContentDetailDTO) => item.newsId + '')
       }
       }
+      .visibility(this.isMouted ? Visibility.Visible : Visibility.None)
       .cachedCount(-1)
       .cachedCount(-1)
       .indicator(false)
       .indicator(false)
       .vertical(true)
       .vertical(true)
@@ -226,6 +247,9 @@ export struct VideoChannelDetail {
         }
         }
       })
       })
 
 
-    }.width('100%').height('100%')
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor('#000000')
   }
   }
 }
 }