developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
775cd46e 1 parent fb21ece7

修复频道切换颜色问题

Inline Side-by-side
Showing 7 changed files with 115 additions and 100 deletions
... ... @@ -4,37 +4,39 @@ import { TopNavDTO } from './TopNavDTO';
* 底导(包含顶导列表）数据
*/
export interface BottomNavDTO {
backgroundUrl: string;
channelChooseActionUrl: string;
channelChooseCColor: string;
channelChooseColor: string;
channelMoreColor: string;
backgroundUrl: string; // 迭代四：页面背景图
channelChooseActionUrl: string; // 迭代四：频道选中下划线动画
channelChooseCColor: string; // 迭代四：频道未选中颜色
channelChooseColor: string; // 迭代四：频道选中颜色
channelMoreColor: string; // 迭代四：更多频道颜色
extraData: string;
homePageColor: string;
icon: string;
iconC: string;
homePageColor: string; // 迭代四：主页图标/文字颜色
icon: string; // 未选中图标
iconC: string; // 选中图标
id: number;
immersiveIconCUrl: string;
immersiveIconUrl: string;
immersiveNameCColor: string;
immersiveNameColor: string;
logoUrl: string;
immersiveIconCUrl: string; // 迭代二新增-图标颜色-选中（沉浸式频道）
immersiveIconUrl: string; // 迭代二新增-图标颜色-未选中（沉浸式频道）
immersiveNameCColor: string; // 迭代二新增-文字颜色-选中（沉浸式频道）
immersiveNameColor: string; // 迭代二新增-文字颜色-未选中（沉浸式频道）
logoUrl: string; // 迭代四：logo图片
morningAndEveningUrl: string;
name: string;
nameCColor: string;
nameColor: string;
nightIconCUrl: string;
nightIconUrl: string;
nightNameCColor: string;
nightNameColor: string;
noticeColor: string;
nameCColor: string; // 名字选中颜色
nameColor: string; // 名字颜色
nightIconCUrl: string; // 迭代三新增-图标颜色-选中（夜间模式）
nightIconUrl: string; // 迭代三新增-图标颜色-未选中（夜间模式）
nightNameCColor: string; // 迭代三新增-文字颜色-选中（夜间模式）
nightNameColor: string; // 迭代三新增-文字颜色-未选中（夜间模式）
noticeColor: string; // 迭代四：消息通知提醒颜色
pageId?: string;
pageType?: string;
searchBothColor: string;
searchUrl: string;
searchBothColor: string; // 迭代四：两侧文字图标颜色,搜索图标颜色
searchUrl: string; // 迭代四：搜索背景框
sortValue: number;
statusBarColor: number;
statusBarColor: number; // 迭代四：状态栏图标颜色，0：白色，1：黑色
topNavChannelList: TopNavDTO[];
topStyle: string;
type: string;
topStyle: string; // 顶部样式：中文的(11-新闻;12-人民号;13-视频;14-服务)
type: string; // 底部导航类型，1普通 2我的；【rmrb需要扩展】
fmorningAndEveningUrl: string; // 迭代四：早晚报背景框
dropDownAnimationColor: string; // 下拉加载动画颜色，1白色，2灰色。未配置值是null
}
\ No newline at end of file
... ...
... ... @@ -4,9 +4,10 @@ import { BottomNavDTO } from './BottomNavDTO';
* 导航Body数据
*/
export interface NavigationBodyDTO {
backgroundColor: string;
backgroundColor: string; // 迭代二新增-底部导航背景色（信息流频道）
bottomNavList: BottomNavDTO[];
// greyBottomNav: GreyBottomNav;
immersiveBackgroundColor: string;
nightBackgroundColor: string;
// greyBottomNav: GreyBottomNav; // 灰度皮肤
immersiveBackgroundColor: string; // 迭代二新增-底部导航背景色（沉浸式频道）
nightBackgroundColor: string; // 迭代三新增-底部导航背景色（夜间模式）
}
... ...
... ... @@ -7,14 +7,14 @@ export interface TopNavDTO {
channelType: number;
defaultPermitted: number;
delPermitted: number;
fontCColor: string;
fontColor: string;
fontCColor: string; // 频道展示样式颜色（选中状态)
fontColor: string; // 频道展示样式颜色（未选中状态)
headlinesOn: number;
homeChannel: string;
iconCUrl: string;
iconCUrlSize: string;
iconUrl: string;
iconUrlSize: string;
iconCUrlSize: string;
iconUrl: string; // 频道图片展示样式图片相对地址（未选中状态)
iconCUrl: string; //频道图片展示样式图片相对地址（选中状态
localChannel: string;
moreChannel: string;
movePermitted: number;
... ... @@ -23,5 +23,5 @@ export interface TopNavDTO {
num: number;
pageId: number;
pageType: string;
underlineCColor: string;
underlineCColor: string; // 选中下划线颜色
}
... ...
import { BottomNavi, CommonConstants } from 'wdConstant';
import { BottomNavDTO } from 'wdBean';
import { BottomNavDTO, TopNavDTO } from 'wdBean';
import { DateTimeUtils, EmitterEventId, EmitterUtils, Logger } from 'wdKit';
import { TopNavigationComponent } from './TopNavigationComponent';
import { MinePageComponent } from './MinePageComponent';
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';
const TAG = 'BottomNavigationComponent';
let storage = LocalStorage.getShared();
... ... @@ -21,14 +22,13 @@ export struct BottomNavigationComponent {
@Provide isLayoutFullScreen: boolean = false
@Provide isImmersive: boolean = false // 是否开启沉浸式模式 http://192.168.1.3:3300/project/3802/interface/api/189229
@Provide isNight: boolean = false // 是否开启夜间模式
@Provide currentBottomNavInfo: BottomNavDTO = {} as BottomNavDTO; // 当前底导信息
@Provide currentTopNavInfo: TopNavDTO = {} as TopNavDTO; // 当前顶导信息
@Provide barBackgroundColor: Color = Color.Transparent
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
// 底导/顶导全部数据
@State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = []
// 底导当前选中/焦点下标
@State currentNavIndex: number = BottomNavi.NEWS;
// @State currentTopNavSelectedIndex: number = 0; //
@State barBackgroundColor: Color = Color.Transparent
@State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = [] // 底导/顶导全部数据
@State currentNavIndex: number = BottomNavi.NEWS; // 底导当前选中/焦点下标
// 底导TabsController
private navController: TabsController = new TabsController();
readonly ASPECT_RATIO_1_1: number = 1 / 1; // 底导图片宽高比
... ... @@ -44,6 +44,7 @@ export struct BottomNavigationComponent {
@State assignChannel: AssignChannelParam = new AssignChannelParam()
// 自动刷新触发（双击tab自动刷新）
@State autoRefresh: number = 0
async aboutToAppear() {
Logger.info(TAG, `aboutToAppear currentNavIndex: ${this.currentNavIndex}`);
let bottomNav = await PageViewModel.getBottomNavData(getContext(this))
... ... @@ -84,7 +85,6 @@ export struct BottomNavigationComponent {
_currentNavIndex: $currentNavIndex,
navIndex: index,
currentBottomNavName: navItem.name,
barBackgroundColor: $barBackgroundColor,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
... ... @@ -99,8 +99,8 @@ export struct BottomNavigationComponent {
.animationDuration(0)
.barHeight($r('app.float.bottom_navigation_barHeight'))
.barMode(BarMode.Fixed)
// TODO:更详细的判断是视频频道
.barBackgroundColor(this.barBackgroundColor)
// 备注：鸿蒙目前只有修改三线导航背景方法，对于全面屏导航条手机需要设置背景色并使其扩散到导航区域
.backgroundColor(this.barBackgroundColor)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
... ... @@ -108,17 +108,6 @@ export struct BottomNavigationComponent {
}
/**
* TODO:更详细的判断视频频道
*/
getFontColor(index: number): Color {
if (this.currentNavIndex === 2 && this.barBackgroundColor === Color.Black) {
return Color.White
} else {
return this.currentNavIndex === index ? Color.Red : Color.Gray
}
}
@Builder
tabBarBuilder(navItem: BottomNavDTO, index: number) {
Stack({ alignContent: Alignment.Bottom }) {
... ... @@ -132,31 +121,34 @@ export struct BottomNavigationComponent {
.fontWeight(this.currentNavIndex === index ? FontWeight.Bold : FontWeight.Normal)
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_10'))// .fontColor(this.currentNavIndex === index ? Color.Red : Color.Gray)
.fontColor(this.getFontColor(index))
.fontColor(this.currentNavIndex === index ? navItem.nameCColor : navItem.nameColor)
.opacity(this.currentNavIndex === index ? this.FULL_OPACITY : this.SIXTY_OPACITY)
}
.height($r('app.float.bottom_navigation_barHeight'))
.hoverEffect(HoverEffect.Highlight)
.onClick(() => {
if (this.currentNavIndex === index) {
// 当前tab，双击事件
this.doubleClick(() => {
Logger.info(TAG, 'tab double click ')
this.autoRefresh++
.gesture(
TapGesture({ count: 2 })
.onAction((event: GestureEvent) => {
AlertDialog.show({ message: 'aa' })
if (this.currentNavIndex === index) {
// 当前tab，双击事件
this.autoRefresh++
}
})
)
.onClick(() => {
if (navItem.name === '我的') {
this.barBackgroundColor = Color.White
this.currentBottomNavInfo = {} as BottomNavDTO
} else {
// 切换tab
this.currentNavIndex = index;
Logger.info(TAG, `onChange, index: ${index}`);
this.currentBottomNavInfo = navItem
}
this.currentNavIndex = index;
Logger.info(TAG, `onChange, index: ${index}`);
})
// .justifyContent(FlexAlign.Center)
// .onClick(() => {
// Logger.info(TAG, `onClick, index: ${index}`);
// this.currentNavIndex = index ?? 0;
// this.navController.changeIndex(this.currentNavIndex);
// })
}
// 底导切换函数
... ... @@ -199,17 +191,17 @@ export struct BottomNavigationComponent {
/**
* 双击实现
*/
doubleClickTime: number = 0
// doubleClickTime: number = 0
/**
* 双击实现
*/
private doubleClick(fun: () => void) {
let now = DateTimeUtils.getTimeStamp()
if (now - this.doubleClickTime < 200) {
fun()
} else {
this.doubleClickTime = now
}
}
// private doubleClick(fun: () => void) {
// let now = DateTimeUtils.getTimeStamp()
// if (now - this.doubleClickTime < 200) {
// fun()
// } else {
// this.doubleClickTime = now
// }
// }
}
\ No newline at end of file
... ...
import { CompDTO, TopNavDTO } from 'wdBean';
import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
import { LazyDataSource, Logger } from 'wdKit';
import { ProcessUtils } from 'wdRouter';
import { PageComponent } from './PageComponent';
... ... @@ -26,12 +26,14 @@ export struct TopNavigationComponent {
@Consume isLayoutFullScreen: boolean
@Consume bottomRectHeight: number
@Consume topRectHeight: number
@Consume @Watch('topOrBottomNavChange') currentBottomNavInfo: BottomNavDTO // 当前底导信息
@Consume barBackgroundColor: Color
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@Link barBackgroundColor: Color
@Link _currentNavIndex?: number;
// 顶导当前选中/焦点下标
@State currentTopNavSelectedIndex: number = 0;
@State @Watch('topOrBottomNavChange') currentTopNavSelectedIndex: number = 0;
@State currentTopNavName: string = '';
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
... ... @@ -56,6 +58,21 @@ export struct TopNavigationComponent {
// 当前底导index
@State navIndex: 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() {
let _channelIds: number [] = []
... ... @@ -126,10 +143,14 @@ export struct TopNavigationComponent {
this.channelIds = _channelIds
this.myChannelList = _myChannelList
this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[0].name : this.topNavList[0].name
//缓存首页频道
let index = this.myChannelList.findIndex(_item => _item.channelId === this.indexSettingChannelId)
if (index > -1) {
this.currentTopNavSelectedIndex = index
this.currentTopNavName = this.myChannelList[index].name
}
}
... ... @@ -196,7 +217,6 @@ export struct TopNavigationComponent {
groupId: this.groupId + '',
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
barBackgroundColor: $barBackgroundColor
})
} else
if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
... ... @@ -216,9 +236,10 @@ export struct TopNavigationComponent {
.barHeight($r('app.float.top_tab_bar_height'))
.barMode(BarMode.Scrollable)
.vertical(false)
// item.name === '视频' && this.currentTopNavSelectedIndex === 0 ?
.barBackgroundColor(this.barBackgroundColor)
.onChange((index: number) => {
this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name
Logger.info(TAG, `onChange index : ${index}`);
if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
!this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
... ... @@ -256,15 +277,11 @@ export struct TopNavigationComponent {
}
/**
* TODO:更详细的判断视频频道
* TODO:根据顶导配置获取颜色展示效果不对，待确认
*/
getFontColor(item: TopNavDTO, index: number): Color | string {
if (this._currentNavIndex === 2) {
if (this.currentTopNavSelectedIndex == 0) {
return item.name === '视频' ? Color.White : '#e5e0e0'
} else {
return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
}
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"
}
... ... @@ -276,9 +293,10 @@ export struct TopNavigationComponent {
Text(item.name)
.fontSize($r('app.float.selected_text_size'))
.fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
.fontColor(this.getFontColor(item, index))
.padding({ top: $r('app.float.top_tab_item_padding_top') , bottom: $r('app.float.top_tab_item_padding_bottom')})
.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)
// .backgroundImage(this.currentTopNavSelectedIndex === index ? item.iconCUrl : item.iconUrl)
if (this.currentTopNavSelectedIndex === index) {
Row()
.width(20)
... ... @@ -292,18 +310,20 @@ export struct TopNavigationComponent {
minWidth: $r('app.float.top_tab_item_min_width'),
maxWidth: $r('app.float.top_tab_item_max_width')
})
.backgroundColor(Color.Transparent)
// .backgroundColor(Color.Transparent)
.padding({
left: $r('app.float.top_tab_item_padding_horizontal'),
right: $r('app.float.top_tab_item_padding_horizontal'),
})
.id(`col_tabBar${index}`)
.margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
}
aboutToAppear() {
//处理新闻tab顶导频道数据
this.topNavListHandle()
this.setBarBackgroundColor()
}
aboutToDisappear() {
... ...
... ... @@ -133,7 +133,7 @@ export struct DetailPlayShortVideoPage {
aboutToAppear() {
this.videoLandScape = this.contentDetailData?.videoInfo[0]?.videoLandScape
this.playerController.onCanplay = () => {
if (this.index == 0 || this.currentIndex === this.index) {
if ((this.index == 0 || this.currentIndex === this.index) && this.switchVideoStatus) {
this.playerController.play()
}
}
... ...
... ... @@ -38,7 +38,7 @@ export struct VideoChannelDetail {
// private recommend?: string = '' // 0.非推荐，1.推荐；
@Link @Watch('navIndexChange') bottomNavIndex: number
@Link @Watch('navIndexChange') topNavIndex: number
@Link barBackgroundColor: Color
@Consume barBackgroundColor: Color
private swiperController: SwiperController = new SwiperController()
@Provide showComment: boolean = false
@Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
... ... @@ -72,11 +72,11 @@ export struct VideoChannelDetail {
navIndexChange() {
console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
this.barBackgroundColor = Color.Black
// this.barBackgroundColor = Color.Black
this.switchVideoStatus = true
this.openFullScreen()
} else {
this.barBackgroundColor = Color.Transparent
// this.barBackgroundColor = Color.Transparent
this.switchVideoStatus = false
this.closeFullScreen()
}
... ...