developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yuzhilin
c8955c68 1 parent e6127b79

tab数据处理

Inline Side-by-side
Showing 3 changed files with 70 additions and 323 deletions
... ... @@ -13,15 +13,14 @@ const LOCAL_CHANNEL: string = '地方频道'
struct ChannelDialog {
@State indexSettingTabIndex: number = 1
@State isEditIng: boolean = false
@Link currentTopNavSelectedIndex : number
@Link myChannelList: Array<TopNavDTO>
@Link moreChannelList: Array<TopNavDTO>
@Link localChannelList: Array<TopNavDTO>
@Link indexSettingArray: Array<string>
@Link topNavList: Array<TopNavDTO>
@Link currentTopNavSelectedIndex: number
@Link myChannelList: TopNavDTO[]
@Link moreChannelList: TopNavDTO[]
@Link localChannelList: TopNavDTO[]
@Link indexSettingArray: string[]
controller?: CustomDialogController
myChannelItemEditHandle = (index: number): void => {
let item = this.myChannelList.splice(index, 1)[0]
console.info(`itemitemitem${JSON.stringify(item)}`)
if (item.moreChannel === '1') {
this.moreChannelList.unshift(item)
}
... ... @@ -29,7 +28,6 @@ struct ChannelDialog {
this.localChannelList.unshift(item)
}
}
controller?: CustomDialogController
build() {
Column() {
... ... @@ -108,7 +106,7 @@ struct ChannelDialog {
Row() {
Text(item.name)
.fontSize(14)
.fontColor( this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' ? '#999999' : '#222222'))
.fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' ? '#999999' : '#222222'))
if (this.isEditIng && item.myChannel !== '1') {
Image($r('app.media.icon_audio_close'))
... ... @@ -122,10 +120,11 @@ struct ChannelDialog {
.backgroundColor(item.homeChannel === '1' ? '#F5F5F5' : '')
.onClick(() => {
if (this.isEditIng) {
if(item.myChannel !== '1'){
if (item.myChannel !== '1') {
this.myChannelItemEditHandle(index)
}
}else{
} else {
this.currentTopNavSelectedIndex = index
this.controller?.close()
}
})
... ... @@ -234,306 +233,35 @@ struct ChannelDialog {
.padding(16)
.backgroundColor('#ffffff')
}
onTopNavigationDataUpdated() {
}
}
@Entry
@Component
struct ChannelSubscriptionLayout {
@State indexSettingArray: string [] = ['推荐', '热点']
//当前选中的频道
@Prop currentTopNavSelectedIndex?: number;
@Link currentTopNavSelectedIndex: number;
@Link myChannelList: TopNavDTO []
@Link moreChannelList: TopNavDTO []
@Link localChannelList: TopNavDTO []
@State indexSettingArray: Array<string> = ['推荐', '热点']
@State myChannelList: Array<TopNavDTO> = [
// {
// channelId: 0,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '1',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '推荐',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 1,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '1',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '热点',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 2,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '视频',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 3,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '云课堂',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
]
@State moreChannelList: Array<TopNavDTO> = [
// {
// channelId: 4,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '房产',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 5,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '生态',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 6,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '健康',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// }
]
@State localChannelList: Array<TopNavDTO> = [
// {
// channelId: 7,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '北京',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 8,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '上海',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 9,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '江苏',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// }
]
// 顶导数据
@State topNavList: TopNavDTO[] = []
dialogController: CustomDialogController | null = new CustomDialogController({
builder: ChannelDialog({
currentTopNavSelectedIndex:this.currentTopNavSelectedIndex,
indexSettingArray: this.indexSettingArray,
topNavList: this.topNavList,
myChannelList: this.myChannelList,
moreChannelList: this.moreChannelList,
localChannelList: this.localChannelList,
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
indexSettingArray: $indexSettingArray,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList
}),
cancel: this.exitApp,
alignment: DialogAlignment.TopEnd,
customStyle: true,
})
aboutToAppear() {
this.topNavList.forEach((item,index)=>{
if(item.myChannel === '1'){
this.myChannelList.push(item)
}
if(item.moreChannel === '1'){
this.moreChannelList.push(item)
}
if(item.localChannel === '1'){
this.localChannelList.push(item)
}
})
}
aboutToDisappear() {
this.dialogController = null // 将dialogController置空
}
onCancel() {
console.info('Callback when the first button is clicked')
}
aboutToAppear() {
onAccept() {
console.info('Callback when the second button is clicked')
}
exitApp() {
console.info('Click the callback in the blank area')
aboutToDisappear() {
this.dialogController = null // 将dialogController置空
}
build() {
... ...
... ... @@ -101,6 +101,7 @@ export struct PageComponent {
}
onChange() {
Logger.info(TAG, `onChangezz id: ${this.pageId} , ${this.channelId} , ${this.navIndex} , navIndex: ${this.currentTopNavSelectedIndex}`);
if (this.navIndex === this.currentTopNavSelectedIndex) {
this.getData();
}
... ...
... ... @@ -17,46 +17,63 @@ export struct TopNavigationComponent {
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@State handledTopNavList: TopNavDTO[] = []
//我的频道id缓存列表
@State channelIds: number[] = []
// 我的频道列表
@State myChannelList: TopNavDTO[] = []
// 更多频道列表
@State moreChannelList: TopNavDTO[] = []
// 地方频道列表
@State localChannelList: TopNavDTO[] = []
readonly MAX_LINE: number = 1;
topNavListHandle() {
let defaultMyChannelList: TopNavDTO[] = []
this.handledTopNavList = [...this.topNavList]
this.handledTopNavList.sort((a, b) => {
let handledTopNavList = [...this.topNavList]
handledTopNavList.sort((a, b) => {
return a.num - b.num;
});
Logger.info(TAG, `aboutToAppear this.handledTopNavListsort : ${JSON.stringify(this.handledTopNavList)}`);
for (let i = 0; i < this.handledTopNavList.length; i++) {
if (this.handledTopNavList[i].defaultPermitted === 0 || this.handledTopNavList[i].movePermitted === 0 || this.handledTopNavList[i].delPermitted === 0 || this.handledTopNavList[i].headlinesOn === 1) {
defaultMyChannelList.push(this.handledTopNavList.splice(i, 1)[0]);
handledTopNavList.forEach(item => {
if (item.defaultPermitted === 1 || item.movePermitted === 0 || item.delPermitted === 0 || item.headlinesOn === 1) {
defaultMyChannelList.push(item);
}
})
defaultMyChannelList.forEach(item => {
item.myChannel = '1'
if (item.defaultPermitted === 1) {
item.homeChannel = '1'
}
let index = handledTopNavList.findIndex(_item => _item.channelId === item.channelId)
if (index !== -1) {
handledTopNavList.splice(index, 1)
}
})
Logger.info(TAG, `aboutToAppear defaultMyChannelListsort : ${JSON.stringify(defaultMyChannelList)}`);
for (const element of defaultMyChannelList) {
element.myChannel = '1'
if (element.defaultPermitted === 1) {
element.homeChannel = '1'
handledTopNavList.unshift(...defaultMyChannelList)
handledTopNavList.forEach((item, index) => {
if (item.channelType === 2) {
item.localChannel = '1'
}
if (index >= 11) {
if (item.channelType === 1) {
item.moreChannel = '1'
}
this.handledTopNavList.unshift(...defaultMyChannelList)
for (let i = 0; i < this.handledTopNavList.length; i++) {
if(this.handledTopNavList[i].channelType === 2){
this.handledTopNavList[i].localChannel = '1'
} else {
if (item.channelType === 1 && item.myChannel !== '1') {
item.moreChannel = '1'
}
if(i>=11){
if(this.handledTopNavList[i].channelType === 1){
this.handledTopNavList[i].moreChannel = '1'
}
}else{
if(this.handledTopNavList[i].channelType === 1 && this.handledTopNavList[i].myChannel !== '1'){
this.handledTopNavList[i].moreChannel = '1'
if (item.myChannel === '1') {
this.myChannelList.push(item)
}
if (item.moreChannel === '1') {
this.moreChannelList.push(item)
}
if (item.localChannel === '1') {
this.localChannelList.push(item)
}
console.info(`handledTopNavList:${JSON.stringify(this.handledTopNavList)}`)
})
}
build() {
... ... @@ -150,7 +167,7 @@ export struct TopNavigationComponent {
Stack({ alignContent: Alignment.TopEnd }) {
Tabs() {
ForEach(this.handledTopNavList, (navItem: TopNavDTO, index: number) => {
ForEach(this.myChannelList, (navItem: TopNavDTO, index: number) => {
TabContent() {
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
... ... @@ -171,8 +188,10 @@ export struct TopNavigationComponent {
})
ChannelSubscriptionLayout({
topNavList: this.handledTopNavList,
currentTopNavSelectedIndex: this.currentTopNavSelectedIndex
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
currentTopNavSelectedIndex: $currentTopNavSelectedIndex
})
}
... ... @@ -208,7 +227,6 @@ export struct TopNavigationComponent {
bottom: $r('app.float.top_tab_item_padding_bottom')
})
.id(`col_tabBar${index}`)
}
aboutToAppear() {
... ...