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 {
TopNavigationComponent({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: this.currentNavIndex,
_currentNavIndex: $currentNavIndex,
currentBottomNavName: navItem.name,
changeBarBackgroundColor: (color: Color) => {
this.barBackgroundColor = color
}
barBackgroundColor: $barBackgroundColor
})
}
... ... @@ -92,7 +91,8 @@ export struct BottomNavigationComponent {
// this.onBottomNavigationIndexChange()
})
.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 currentBottomNavName: string = ''
private tabsController: TabsController = new TabsController()
private changeBarBackgroundColor: (color: Color) => void = () => {
}
@Consume isLayoutFullScreen: boolean
@Consume bottomRectHeight: number
@Consume topRectHeight: number
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 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 compList: LazyDataSource<CompDTO> = new LazyDataSource();
... ... @@ -151,29 +149,6 @@ export struct TopNavigationComponent {
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() {
Column() {
// 顶部搜索、日报logo、早晚报
... ... @@ -230,11 +205,12 @@ export struct TopNavigationComponent {
TabContent() {
if (this.currentBottomNavName === '视频' && navItem.name === '视频') {
VideoChannelDetail({
bottomNavIndex: this._currentNavIndex,
topNavIndex: this.currentTopNavSelectedIndex,
bottomNavIndex: $_currentNavIndex,
topNavIndex: $currentTopNavSelectedIndex,
groupId: this.groupId + '',
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
barBackgroundColor: $barBackgroundColor
})
} else
if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
... ...
... ... @@ -137,26 +137,22 @@ export struct DetailVideoListPage {
Column() {
Swiper(this.swiperController) {
ForEach(this.data, (item: ContentDetailDTO, index: number) => {
Column() {
DetailPlayShortVideoPage({
switchVideoStatus: $switchVideoStatus,
contentDetailData: item,
currentIndex: this.currentIndex,
index: index,
interactData: this.interactDataList[index]
})
}.width('100%')
.height('100%')
DetailPlayShortVideoPage({
switchVideoStatus: $switchVideoStatus,
contentDetailData: item,
currentIndex: this.currentIndex,
index: index,
interactData: this.interactDataList[index]
})
}, (item: ContentDetailDTO) => item.newsId + '')
}
.clip(false)
.cachedCount(-1)
.indicator(false)
.vertical(true)
.loop(false)
.width('100%')
.height('100%')
.cachedCount(3)
.displayCount(1, true)
.onChange((index: number) => {
this.currentIndex = index
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)
}
}
\ No newline at end of file
... ...
... ... @@ -14,6 +14,7 @@ import {
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { Logger, WindowModel } from 'wdKit/Index';
import { BusinessError } from '@kit.BasicServicesKit';
import { PictureLoading } from './PictureLoading';
interface loadMoreData {
pageNum: number;
... ... @@ -39,6 +40,7 @@ export struct VideoChannelDetail {
// private recommend?: string = '' // 0.非推荐，1.推荐；
@Link @Watch('navIndexChange') bottomNavIndex: number
@Link @Watch('navIndexChange') topNavIndex: number
@Link barBackgroundColor: Color
private swiperController: SwiperController = new SwiperController()
@Provide showComment: boolean = false
@State data: ContentDetailDTO[] = []
... ... @@ -46,26 +48,29 @@ export struct VideoChannelDetail {
@State interactDataList: InteractDataDTO[] = []
@State totalCount: number = 0
@State switchVideoStatus: boolean = false
@State isMouted: boolean = false
/**
* 监听视频频道激活或失活
*/
navIndexChange() {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
// 如果视频在暂停则播放视频
this.switchVideoStatus = true
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', statusBarColor: '#000000' })
} else {
// 如果视频在播放则暂停视频
this.switchVideoStatus = false
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', statusBarColor: '#ffffff' })
// WindowModel.shared.setWindowLayoutFullScreen(false)
}
timer = -1
}, 100)
// if (timer) clearTimeout(timer)
console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
// timer = setTimeout(() => {
if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
// 如果视频在暂停则播放视频
this.switchVideoStatus = true
this.barBackgroundColor = Color.Black
this.openFullScreen()
} else {
// 如果视频在播放则暂停视频
this.switchVideoStatus = false
this.barBackgroundColor = Color.Transparent
this.closeFullScreen()
}
// timer = -1
// }, 100)
}
... ... @@ -82,22 +87,27 @@ export struct VideoChannelDetail {
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:颜色待根据业务接口修改
*/
openFullScreen() {
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
statusBarColor: '#000000',
// navigationBarColor: '#000000',
// navigationBarContentColor: '#ffffff'
})
// WindowModel.shared.setWindowLayoutFullScreen(true)
// WindowModel.shared.setWindowSystemBarEnable([])
}
... ... @@ -107,7 +117,13 @@ export struct VideoChannelDetail {
* TODO:颜色待根据业务接口修改
*/
closeFullScreen() {
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
statusBarColor: '#ffffff',
// navigationBarColor: '#0x66000000',
// navigationBarContentColor: '#0xE5FFFFFF'
})
// WindowModel.shared.setWindowLayoutFullScreen(false)
// WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
}
... ... @@ -162,6 +178,9 @@ export struct VideoChannelDetail {
this.batchContentDetail(list1)
this.getContentInteract(list2)
setTimeout(() => {
this.isMouted = true
}, 500)
})
}
... ... @@ -192,6 +211,7 @@ export struct VideoChannelDetail {
build() {
Column() {
PictureLoading().visibility(this.isMouted ? Visibility.None : Visibility.Visible)
Swiper(this.swiperController) {
ForEach(this.data, (item: ContentDetailDTO, index: number) => {
Column() {
... ... @@ -206,6 +226,7 @@ export struct VideoChannelDetail {
.height('100%')
}, (item: ContentDetailDTO) => item.newsId + '')
}
.visibility(this.isMouted ? Visibility.Visible : Visibility.None)
.cachedCount(-1)
.indicator(false)
.vertical(true)
... ... @@ -226,6 +247,9 @@ export struct VideoChannelDetail {
}
})
}.width('100%').height('100%')
}
.width('100%')
.height('100%')
.backgroundColor('#000000')
}
}
\ No newline at end of file
... ...