developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
ef26e7c6 1 parent 0d22cc27

修复视频频道切换问题

Inline Side-by-side
Showing 6 changed files with 108 additions and 75 deletions
@@ -67,11 +67,10 @@ export struct BottomNavigationComponent { @@ -67,11 +67,10 @@ export struct BottomNavigationComponent {
67 TopNavigationComponent({ 67 TopNavigationComponent({
68 groupId: navItem.id, 68 groupId: navItem.id,
69 topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073), 69 topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
70 - _currentNavIndex: this.currentNavIndex, 70 + _currentNavIndex: $currentNavIndex,
71 currentBottomNavName: navItem.name, 71 currentBottomNavName: navItem.name,
72 - changeBarBackgroundColor: (color: Color) => {  
73 - this.barBackgroundColor = color  
74 - } 72 + barBackgroundColor: $barBackgroundColor
  73 +
75 }) 74 })
76 } 75 }
77 76
@@ -92,7 +91,8 @@ export struct BottomNavigationComponent { @@ -92,7 +91,8 @@ export struct BottomNavigationComponent {
92 // this.onBottomNavigationIndexChange() 91 // this.onBottomNavigationIndexChange()
93 }) 92 })
94 .backgroundColor(this.barBackgroundColor) 93 .backgroundColor(this.barBackgroundColor)
95 - .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致 94 +
  95 + // .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致
96 96
97 } 97 }
98 98
@@ -24,17 +24,15 @@ export struct TopNavigationComponent { @@ -24,17 +24,15 @@ export struct TopNavigationComponent {
24 private groupId: number = 0 24 private groupId: number = 0
25 private currentBottomNavName: string = '' 25 private currentBottomNavName: string = ''
26 private tabsController: TabsController = new TabsController() 26 private tabsController: TabsController = new TabsController()
27 - private changeBarBackgroundColor: (color: Color) => void = () => {  
28 - }  
29 @Consume isLayoutFullScreen: boolean 27 @Consume isLayoutFullScreen: boolean
30 @Consume bottomRectHeight: number 28 @Consume bottomRectHeight: number
31 @Consume topRectHeight: number 29 @Consume topRectHeight: number
32 @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 30 @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
33 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 31 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
34 - @State barBackgroundColor: Color = Color.Transparent  
35 - @Prop @Watch('indexChange') _currentNavIndex?: number; 32 + @Link barBackgroundColor: Color
  33 + @Link _currentNavIndex?: number;
36 // 顶导当前选中/焦点下标 34 // 顶导当前选中/焦点下标
37 - @State @Watch('indexChange') currentTopNavSelectedIndex: number = 0; 35 + @State currentTopNavSelectedIndex: number = 0;
38 // 顶导数据 36 // 顶导数据
39 @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = [] 37 @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
40 @State compList: LazyDataSource<CompDTO> = new LazyDataSource(); 38 @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@@ -151,29 +149,6 @@ export struct TopNavigationComponent { @@ -151,29 +149,6 @@ export struct TopNavigationComponent {
151 WDRouterRule.jumpWithAction(taskAction) 149 WDRouterRule.jumpWithAction(taskAction)
152 } 150 }
153 151
154 - indexChange() {  
155 -  
156 - // 判断视频频道待处理  
157 - if (this._currentNavIndex === 2 && this.currentTopNavSelectedIndex == 0) {  
158 - this.barBackgroundColor = Color.Black  
159 - this.changeBarBackgroundColor && this.changeBarBackgroundColor(this.barBackgroundColor)  
160 - // WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })  
161 - // WindowModel.shared.setWindowLayoutFullScreen(true)  
162 - // this.isLayoutFullScreen = true  
163 - // this.bottomRectHeight = this.bottomSafeHeight  
164 - // this.topRectHeight = this.topSafeHeight  
165 -  
166 - } else {  
167 - this.barBackgroundColor = Color.Transparent  
168 - this.changeBarBackgroundColor && this.changeBarBackgroundColor(this.barBackgroundColor)  
169 - // WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })  
170 - // WindowModel.shared.setWindowLayoutFullScreen(false)  
171 - // this.isLayoutFullScreen = false  
172 - // this.bottomRectHeight = 0  
173 - // this.topRectHeight = 0  
174 - }  
175 - }  
176 -  
177 build() { 152 build() {
178 Column() { 153 Column() {
179 // 顶部搜索、日报logo、早晚报 154 // 顶部搜索、日报logo、早晚报
@@ -230,11 +205,12 @@ export struct TopNavigationComponent { @@ -230,11 +205,12 @@ export struct TopNavigationComponent {
230 TabContent() { 205 TabContent() {
231 if (this.currentBottomNavName === '视频' && navItem.name === '视频') { 206 if (this.currentBottomNavName === '视频' && navItem.name === '视频') {
232 VideoChannelDetail({ 207 VideoChannelDetail({
233 - bottomNavIndex: this._currentNavIndex,  
234 - topNavIndex: this.currentTopNavSelectedIndex, 208 + bottomNavIndex: $_currentNavIndex,
  209 + topNavIndex: $currentTopNavSelectedIndex,
235 groupId: this.groupId + '', 210 groupId: this.groupId + '',
236 pageId: navItem.pageId + '', 211 pageId: navItem.pageId + '',
237 channelId: navItem.channelId + '', 212 channelId: navItem.channelId + '',
  213 + barBackgroundColor: $barBackgroundColor
238 }) 214 })
239 } else 215 } else
240 if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) { 216 if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
@@ -137,26 +137,22 @@ export struct DetailVideoListPage { @@ -137,26 +137,22 @@ export struct DetailVideoListPage {
137 Column() { 137 Column() {
138 Swiper(this.swiperController) { 138 Swiper(this.swiperController) {
139 ForEach(this.data, (item: ContentDetailDTO, index: number) => { 139 ForEach(this.data, (item: ContentDetailDTO, index: number) => {
140 - Column() {  
141 - DetailPlayShortVideoPage({  
142 - switchVideoStatus: $switchVideoStatus,  
143 - contentDetailData: item,  
144 - currentIndex: this.currentIndex,  
145 - index: index,  
146 - interactData: this.interactDataList[index]  
147 - })  
148 - }.width('100%')  
149 - .height('100%')  
150 - 140 + DetailPlayShortVideoPage({
  141 + switchVideoStatus: $switchVideoStatus,
  142 + contentDetailData: item,
  143 + currentIndex: this.currentIndex,
  144 + index: index,
  145 + interactData: this.interactDataList[index]
  146 + })
151 }, (item: ContentDetailDTO) => item.newsId + '') 147 }, (item: ContentDetailDTO) => item.newsId + '')
152 } 148 }
153 - .clip(false)  
154 - .cachedCount(-1)  
155 .indicator(false) 149 .indicator(false)
156 .vertical(true) 150 .vertical(true)
157 .loop(false) 151 .loop(false)
158 .width('100%') 152 .width('100%')
159 .height('100%') 153 .height('100%')
  154 + .cachedCount(3)
  155 + .displayCount(1, true)
160 .onChange((index: number) => { 156 .onChange((index: number) => {
161 this.currentIndex = index 157 this.currentIndex = index
162 console.info('onChange==', index.toString()) 158 console.info('onChange==', index.toString())
  1 +import { Logger } from 'wdKit';
  2 +
  3 +const TAG = 'PictureLoading';
  4 +
  5 +@Component
  6 +export struct PictureLoading {
  7 + private imagePath: string = ''
  8 + //alt app.media.picture_loading 设计稿尺寸
  9 + @State imageWidth: string | number = 167
  10 + @State ratio: number = 167 / 60
  11 +
  12 + async aboutToAppear() {
  13 + Logger.info(TAG, 'pictures preview')
  14 + }
  15 +
  16 + build() {
  17 + Row() {
  18 + Image(this.imagePath)
  19 + .alt($r('app.media.picture_loading'))
  20 + .width(this.imageWidth)
  21 + .aspectRatio(this.ratio)
  22 + .objectFit(ImageFit.Fill)
  23 + .interpolation(ImageInterpolation.High)
  24 + .onComplete((event) => {
  25 + if (event) {
  26 + this.imageWidth = '100%'
  27 + this.ratio = event.width / event.height
  28 + }
  29 +
  30 + })
  31 + }
  32 + .height('100%')
  33 + .width('100%')
  34 + .backgroundColor(Color.Black)
  35 + .justifyContent(FlexAlign.Center)
  36 + }
  37 +}
@@ -14,6 +14,7 @@ import { @@ -14,6 +14,7 @@ import {
14 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest'; 14 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
15 import { Logger, WindowModel } from 'wdKit/Index'; 15 import { Logger, WindowModel } from 'wdKit/Index';
16 import { BusinessError } from '@kit.BasicServicesKit'; 16 import { BusinessError } from '@kit.BasicServicesKit';
  17 +import { PictureLoading } from './PictureLoading';
17 18
18 interface loadMoreData { 19 interface loadMoreData {
19 pageNum: number; 20 pageNum: number;
@@ -39,6 +40,7 @@ export struct VideoChannelDetail { @@ -39,6 +40,7 @@ export struct VideoChannelDetail {
39 // private recommend?: string = '' // 0.非推荐，1.推荐； 40 // private recommend?: string = '' // 0.非推荐，1.推荐；
40 @Link @Watch('navIndexChange') bottomNavIndex: number 41 @Link @Watch('navIndexChange') bottomNavIndex: number
41 @Link @Watch('navIndexChange') topNavIndex: number 42 @Link @Watch('navIndexChange') topNavIndex: number
  43 + @Link barBackgroundColor: Color
42 private swiperController: SwiperController = new SwiperController() 44 private swiperController: SwiperController = new SwiperController()
43 @Provide showComment: boolean = false 45 @Provide showComment: boolean = false
44 @State data: ContentDetailDTO[] = [] 46 @State data: ContentDetailDTO[] = []
@@ -46,26 +48,29 @@ export struct VideoChannelDetail { @@ -46,26 +48,29 @@ export struct VideoChannelDetail {
46 @State interactDataList: InteractDataDTO[] = [] 48 @State interactDataList: InteractDataDTO[] = []
47 @State totalCount: number = 0 49 @State totalCount: number = 0
48 @State switchVideoStatus: boolean = false 50 @State switchVideoStatus: boolean = false
  51 + @State isMouted: boolean = false
49 52
50 /** 53 /**
51 * 监听视频频道激活或失活 54 * 监听视频频道激活或失活
52 */ 55 */
53 navIndexChange() { 56 navIndexChange() {
54 - if (timer) clearTimeout(timer)  
55 -  
56 - timer = setTimeout(() => {  
57 - if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {  
58 - // 如果视频在暂停则播放视频  
59 - this.switchVideoStatus = true  
60 - WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', statusBarColor: '#000000' })  
61 - } else {  
62 - // 如果视频在播放则暂停视频  
63 - this.switchVideoStatus = false  
64 - WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', statusBarColor: '#ffffff' })  
65 - // WindowModel.shared.setWindowLayoutFullScreen(false)  
66 - }  
67 - timer = -1  
68 - }, 100) 57 + // if (timer) clearTimeout(timer)
  58 + console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
  59 + // timer = setTimeout(() => {
  60 +
  61 + if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
  62 + // 如果视频在暂停则播放视频
  63 + this.switchVideoStatus = true
  64 + this.barBackgroundColor = Color.Black
  65 + this.openFullScreen()
  66 + } else {
  67 + // 如果视频在播放则暂停视频
  68 + this.switchVideoStatus = false
  69 + this.barBackgroundColor = Color.Transparent
  70 + this.closeFullScreen()
  71 + }
  72 + // timer = -1
  73 + // }, 100)
69 74
70 75
71 } 76 }
@@ -82,22 +87,27 @@ export struct VideoChannelDetail { @@ -82,22 +87,27 @@ export struct VideoChannelDetail {
82 Logger.info(TAG, 'aboutToDisappear'); 87 Logger.info(TAG, 'aboutToDisappear');
83 } 88 }
84 89
85 - // onPageShow(): void {  
86 - // this.openFullScreen()  
87 - // Logger.info(TAG, 'onPageShow');  
88 - // }  
89 - //  
90 - // onPageHide(): void {  
91 - // this.closeFullScreen()  
92 - // Logger.info(TAG, 'onPageHide');  
93 - // } 90 + onPageShow(): void {
  91 + this.openFullScreen()
  92 + Logger.info(TAG, 'onPageShow');
  93 + }
  94 +
  95 + onPageHide(): void {
  96 + this.closeFullScreen()
  97 + Logger.info(TAG, 'onPageHide');
  98 + }
94 99
95 /** 100 /**
96 * 开启沉浸式 101 * 开启沉浸式
97 * TODO:颜色待根据业务接口修改 102 * TODO:颜色待根据业务接口修改
98 */ 103 */
99 openFullScreen() { 104 openFullScreen() {
100 - WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', }) 105 + WindowModel.shared.setWindowSystemBarProperties({
  106 + statusBarContentColor: '#ffffff',
  107 + statusBarColor: '#000000',
  108 + // navigationBarColor: '#000000',
  109 + // navigationBarContentColor: '#ffffff'
  110 + })
101 // WindowModel.shared.setWindowLayoutFullScreen(true) 111 // WindowModel.shared.setWindowLayoutFullScreen(true)
102 // WindowModel.shared.setWindowSystemBarEnable([]) 112 // WindowModel.shared.setWindowSystemBarEnable([])
103 } 113 }
@@ -107,7 +117,13 @@ export struct VideoChannelDetail { @@ -107,7 +117,13 @@ export struct VideoChannelDetail {
107 * TODO:颜色待根据业务接口修改 117 * TODO:颜色待根据业务接口修改
108 */ 118 */
109 closeFullScreen() { 119 closeFullScreen() {
110 - WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', }) 120 + WindowModel.shared.setWindowSystemBarProperties({
  121 + statusBarContentColor: '#000000',
  122 + statusBarColor: '#ffffff',
  123 + // navigationBarColor: '#0x66000000',
  124 + // navigationBarContentColor: '#0xE5FFFFFF'
  125 +
  126 + })
111 // WindowModel.shared.setWindowLayoutFullScreen(false) 127 // WindowModel.shared.setWindowLayoutFullScreen(false)
112 // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation']) 128 // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
113 } 129 }
@@ -162,6 +178,9 @@ export struct VideoChannelDetail { @@ -162,6 +178,9 @@ export struct VideoChannelDetail {
162 178
163 this.batchContentDetail(list1) 179 this.batchContentDetail(list1)
164 this.getContentInteract(list2) 180 this.getContentInteract(list2)
  181 + setTimeout(() => {
  182 + this.isMouted = true
  183 + }, 500)
165 184
166 }) 185 })
167 } 186 }
@@ -192,6 +211,7 @@ export struct VideoChannelDetail { @@ -192,6 +211,7 @@ export struct VideoChannelDetail {
192 211
193 build() { 212 build() {
194 Column() { 213 Column() {
  214 + PictureLoading().visibility(this.isMouted ? Visibility.None : Visibility.Visible)
195 Swiper(this.swiperController) { 215 Swiper(this.swiperController) {
196 ForEach(this.data, (item: ContentDetailDTO, index: number) => { 216 ForEach(this.data, (item: ContentDetailDTO, index: number) => {
197 Column() { 217 Column() {
@@ -206,6 +226,7 @@ export struct VideoChannelDetail { @@ -206,6 +226,7 @@ export struct VideoChannelDetail {
206 .height('100%') 226 .height('100%')
207 }, (item: ContentDetailDTO) => item.newsId + '') 227 }, (item: ContentDetailDTO) => item.newsId + '')
208 } 228 }
  229 + .visibility(this.isMouted ? Visibility.Visible : Visibility.None)
209 .cachedCount(-1) 230 .cachedCount(-1)
210 .indicator(false) 231 .indicator(false)
211 .vertical(true) 232 .vertical(true)
@@ -226,6 +247,9 @@ export struct VideoChannelDetail { @@ -226,6 +247,9 @@ export struct VideoChannelDetail {
226 } 247 }
227 }) 248 })
228 249
229 - }.width('100%').height('100%') 250 + }
  251 + .width('100%')
  252 + .height('100%')
  253 + .backgroundColor('#000000')
230 } 254 }
231 } 255 }