developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
a0a77bd4 1 parent fe964b6d

视频频道页改成沉浸式

Inline Side-by-side
Showing 3 changed files with 173 additions and 51 deletions
... ... @@ -7,6 +7,7 @@ import { CompUtils } from '../../utils/CompUtils';
import PageViewModel from '../../viewmodel/PageViewModel';
import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
import { Message } from 'wdJsBridge/src/main/ets/bean/Message';
import { VideoChannelPage } from './VideoChannelPage';
const TAG = 'BottomNavigationComponent';
let storage = LocalStorage.getShared();
... ... @@ -80,6 +81,12 @@ export struct BottomNavigationComponent {
if (CompUtils.isMine(navItem)) {
// 我的页面组件数据列表
MinePageComponent()
} else if (navItem.name === '视频') {
// 视频频道，包含视频和直播
VideoChannelPage({
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
})
} else {
TopNavigationComponent({
groupId: navItem.id,
... ... @@ -95,9 +102,11 @@ export struct BottomNavigationComponent {
}
}
.tabBar(this.tabBarBuilder(navItem, index))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
});
}
.scrollable(false)
.animationDuration(0)
.barHeight($r('app.float.bottom_navigation_barHeight'))
.barMode(BarMode.Fixed)
... ... @@ -115,7 +124,12 @@ export struct BottomNavigationComponent {
Stack({ alignContent: Alignment.Bottom }) {
Image(this.currentNavIndex === index ? navItem.iconC : navItem.icon)
.height(CommonConstants.FULL_PARENT)
.padding({ bottom: 15, left: 10, right: 10, top: 2 })
.padding({
bottom: 15,
left: 10,
right: 10,
top: 2
})
.aspectRatio(this.ASPECT_RATIO_1_1)
Text(navItem.name)
... ... @@ -130,13 +144,13 @@ export struct BottomNavigationComponent {
.hoverEffect(HoverEffect.Highlight)
.onClick(() => {
Logger.info(TAG, `onChange, index: ${index}`);
this.onBottomNavigationIndexChange(navItem,index)
this.onBottomNavigationIndexChange(navItem, index)
})
}
// 底导切换函数
async onBottomNavigationIndexChange(navItem:BottomNavDTO,index:number) {
async onBottomNavigationIndexChange(navItem: BottomNavDTO, index: number) {
Logger.info(TAG, `onBottomNavigationIndexChange this.currentNavIndex: ${this.currentNavIndex}`);
if (navItem.name === '我的') {
this.barBackgroundColor = Color.White
... ... @@ -154,8 +168,9 @@ export struct BottomNavigationComponent {
// 请求顶导数据(参数）：
}
//请求顶导数据
async getTopNavList(id:number){
async getTopNavList(id: number) {
let bottomNavDetail = await PageViewModel.getBottomNavDetailData(id)
this.topNavList = bottomNavDetail?.topNavChannelList || []
}
... ...
import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
import { LazyDataSource, Logger,SPHelper } from 'wdKit';
import { LazyDataSource, Logger, SPHelper } from 'wdKit';
import { SpConstants } from 'wdConstant';
import { ProcessUtils } from 'wdRouter';
import { PageComponent } from './PageComponent';
... ... @@ -31,13 +31,13 @@ export struct TopNavigationComponent {
@Consume isLayoutFullScreen: boolean
@Consume bottomRectHeight: number
@Consume topRectHeight: number
@Consume @Watch('topOrBottomNavChange') currentBottomNavInfo: BottomNavDTO // 当前底导信息
@Consume currentBottomNavInfo: BottomNavDTO // 当前底导信息
@Consume barBackgroundColor: Color
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@Link _currentNavIndex?: number;
// 顶导当前选中/焦点下标
@State @Watch('topOrBottomNavChange') currentTopNavSelectedIndex: number = 0;
@State currentTopNavSelectedIndex: number = 0;
@State currentTopNavName: string = '';
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
... ... @@ -68,20 +68,6 @@ export struct TopNavigationComponent {
private tabsWidth: number = 0
//定时器延时处理切换至版面、播报tab时 返回上一个tab
@State tabTimmer: number = 0
topOrBottomNavChange() {
if (this.currentBottomNavName === this.currentBottomNavInfo?.name) {
this.setBarBackgroundColor()
}
}
setBarBackgroundColor() {
console.error('setBarBackgroundColor', this.currentTopNavName, this.currentBottomNavInfo?.name)
if (this.currentTopNavName === '视频' && this.currentBottomNavInfo?.name === '视频') {
this.barBackgroundColor = Color.Black
} else {
this.barBackgroundColor = Color.White
}
}
//处理新闻tab顶导频道数据
topNavListHandle() {
... ... @@ -129,7 +115,7 @@ export struct TopNavigationComponent {
item.myChannel = '1'
}
if (item.channelType === 2) {
if(cityName.includes(item.name)){
if (cityName.includes(item.name)) {
item.myChannel = '1'
}
item.localChannel = '1'
... ... @@ -158,8 +144,8 @@ export struct TopNavigationComponent {
})
if(cityName){
let index = _myChannelList.findIndex(ele=> cityName.includes(ele.name))
if (cityName) {
let index = _myChannelList.findIndex(ele => cityName.includes(ele.name))
const localChannelitem = _myChannelList.splice(index, 1)[0];
// 将当前地区频道插入到第四个
_myChannelList.splice(3, 0, localChannelitem);
... ... @@ -170,9 +156,10 @@ export struct TopNavigationComponent {
// 崩溃
// this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[0].name : this.topNavList[0].name
if (this._currentNavIndex === 0 && this.myChannelList && this.myChannelList.length > 0 && this.myChannelList[0].name) {
if (this._currentNavIndex === 0 && this.myChannelList && this.myChannelList.length > 0 &&
this.myChannelList[0].name) {
this.currentTopNavName = this.myChannelList[0].name
}else if(this._currentNavIndex != 0 && this.topNavList && this.topNavList.length > 0 && this.topNavList[0].name){
} else if (this._currentNavIndex != 0 && this.topNavList && this.topNavList.length > 0 && this.topNavList[0].name) {
this.currentTopNavName = this.topNavList[0].name
}
... ... @@ -241,15 +228,7 @@ export struct TopNavigationComponent {
ForEach(this.currentBottomNavName === '新闻' ? this.myChannelList : this.topNavList,
(navItem: TopNavDTO, index: number) => {
TabContent() {
if (this.currentBottomNavName === '视频' && navItem.name === '视频') {
VideoChannelDetail({
bottomNavIndex: $_currentNavIndex,
topNavIndex: $currentTopNavSelectedIndex,
groupId: this.groupId + '',
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
})
} else if (this.currentBottomNavName === '人民号' && navItem.name === '关注') {
if (this.currentBottomNavName === '人民号' && navItem.name === '关注') {
PeopleShipMainComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
navIndex: index,
... ... @@ -265,7 +244,7 @@ export struct TopNavigationComponent {
channelId: navItem.channelId + '',
autoRefresh: this.autoRefresh2Page
})
}else{
} else {
channelSkeleton()
}
}
... ... @@ -283,7 +262,7 @@ export struct TopNavigationComponent {
})
.animationDuration(this.animationDuration)
.onChange((index: number) => {
if(this.tabTimmer){
if (this.tabTimmer) {
clearTimeout(this.tabTimmer)
}
this.currentTopNavName =
... ... @@ -356,7 +335,7 @@ export struct TopNavigationComponent {
this.tabsController.changeIndex(index)
}
})
}else {
} else {
Row() {
Image($r('app.media.icon_search'))
.width('24vp')
... ... @@ -375,24 +354,13 @@ export struct TopNavigationComponent {
}
}
/**
* TODO:根据顶导配置获取颜色展示效果不对，待确认
*/
getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
if (item.name === '视频' && this.currentBottomNavInfo.name === '视频') {
return this.currentTopNavSelectedIndex === index ? Color.White : '#e5e0e0'
} else {
return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
}
}
@Builder
tabBarBuilder(item: TopNavDTO, index: number) {
Column() {
Text(item.name)
.fontSize($r('app.float.selected_text_size'))
.fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
.fontColor(this.getTopNavFontColor(item, index))
.fontColor(this.currentTopNavSelectedIndex === index ? Color.Black : "#999999")
.padding({ top: $r('app.float.top_tab_item_padding_top'), bottom: $r('app.float.top_tab_item_padding_bottom') })
.maxLines(this.MAX_LINE)
.id(index.toString())
... ... @@ -434,7 +402,6 @@ export struct TopNavigationComponent {
aboutToAppear() {
//处理新闻tab顶导频道数据
this.topNavListHandle()
this.setBarBackgroundColor()
}
aboutToDisappear() {
... ...
/**
* 视频频道，包含视频和直播
* 视频为沉浸式,直播同新闻页面
*/
import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'
import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
import { PageComponent } from './PageComponent';
const TAG = 'VideoChannelPage'
@Component
export struct VideoChannelPage {
readonly MAX_LINE: number = 1;
private groupId: number = 0
private swiperController: SwiperController = new SwiperController()
@Prop topNavList: TopNavDTO[]
@Link _currentNavIndex?: number;
@Consume barBackgroundColor: Color
@Consume @Watch('setBarBackgroundColor') currentBottomNavInfo: BottomNavDTO // 当前底导信息
@State @Watch('setBarBackgroundColor') currentTopNavSelectedIndex: number = 0;
@State animationDuration: number = 0
@State indicatorLeftMargin: number = 0
@State indicatorWidth: number = 0
// 传递给page的自动刷新通知
@State autoRefresh2Page: number = 0
aboutToAppear(): void {
this.setBarBackgroundColor()
console.log(TAG, 'aboutToAppear')
}
/**
* 顶导、底导切换下标都到改变背景色，进入或退出沉浸式
*/
setBarBackgroundColor() {
if (this.currentTopNavSelectedIndex === 0 && this.currentBottomNavInfo?.name === '视频') {
console.error('setBarBackgroundColor', '黑色')
this.barBackgroundColor = Color.Black
} else {
this.barBackgroundColor = Color.White
console.error('setBarBackgroundColor', '白色')
}
}
/**
* TODO:根据顶导配置获取颜色展示效果不对，待确认
*/
getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
if (item.name === '视频' && this.currentBottomNavInfo.name === '视频') {
return this.currentTopNavSelectedIndex === index ? Color.White : '#e5e0e0'
} else {
return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
}
}
build() {
Stack() {
this.pageSwiperView()
this.topNavView()
}
.width('100%')
.height('100%')
.align(Alignment.Top)
}
@Builder
topNavView() {
Row() {
ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
Column() {
Text(item.name)
.fontSize($r('app.float.selected_text_size'))
.fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
.fontColor(this.getTopNavFontColor(item, index))
.padding({
top: $r('app.float.top_tab_item_padding_top'),
bottom: $r('app.float.top_tab_item_padding_bottom')
})
.maxLines(this.MAX_LINE)
Row()
.width(20)
.height(3)
.backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
.visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)
}
.padding({
left: $r('app.float.top_tab_item_padding_horizontal'),
right: $r('app.float.top_tab_item_padding_horizontal'),
})
.onClick(() => {
this.currentTopNavSelectedIndex = index
this.swiperController.changeIndex(index, true)
})
}, (item: TopNavDTO) => item.channelId + '')
}
.width('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor(this.currentTopNavSelectedIndex === 0 ? Color.Transparent : Color.White)
}
@Builder
pageSwiperView() {
Swiper(this.swiperController) {
ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
if (index == 0) {
// 视频
VideoChannelDetail({
bottomNavIndex: $_currentNavIndex,
topNavIndex: $currentTopNavSelectedIndex,
groupId: this.groupId + '',
pageId: item.pageId + '',
channelId: item.channelId + '',
})
} else {
// 直播
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
navIndex: index,
pageId: item.pageId + '',
channelId: item.channelId + '',
autoRefresh: this.autoRefresh2Page
}).margin({ top: 40 })
}
}, (item: TopNavDTO) => item.channelId + '')
}
.indicator(false)
.loop(false)
.width('100%')
.height('100%')
.cachedCount(3)
.displayCount(1, true)
.alignSelf(ItemAlign.Start)
.onChange((index: number) => {
this.currentTopNavSelectedIndex = index
})
}
}
\ No newline at end of file
... ...