developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yuzhilin
a5e43bd1 1 parent 4d9f17a9

首页频道缓存

Inline Side-by-side
Showing 2 changed files with 69 additions and 43 deletions
... ... @@ -29,7 +29,8 @@ struct ChannelDialog {
@Link myChannelList: TopNavDTO[]
@Link moreChannelList: TopNavDTO[]
@Link localChannelList: TopNavDTO[]
@Link indexSettingArray: string[]
@Link homeChannelList: TopNavDTO[]
@Link indexSettingChannelId: number
controller?: CustomDialogController
confirm: (index: number) => void = () => {
}
... ... @@ -48,9 +49,6 @@ struct ChannelDialog {
let targetItem = this.myChannelList[newIndex]
if (!(targetItem?.headlinesOn === 1 || targetItem?.movePermitted === 0 || targetItem?.homeChannel === '1')) {
this.changeChannelIndex(index, newIndex)
if (index <= this.currentTopNavSelectedIndex || newIndex <= this.currentTopNavSelectedIndex) {
// this.currentTopNavSelectedIndex = this.myChannelList.findIndex(ele => ele.channelId === currentTopNavSelectedItem.channelId)
}
}
}
... ... @@ -214,22 +212,22 @@ struct ChannelDialog {
ListItem() {
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
ForEach(this.indexSettingArray, (text: string, index: number) => {
ForEach(this.homeChannelList, (item: TopNavDTO, index: number) => {
Stack() {
Image(this.indexSettingTabIndex === index ? $r('app.media.index_setting_button_active') : $r('app.media.index_setting_button'))
Image(item.channelId === this.indexSettingChannelId ? $r('app.media.index_setting_button_active') : $r('app.media.index_setting_button'))
.objectFit(ImageFit.Auto)
.rotate({
angle: index === 1 ? 180 : 0
})
Row() {
if (index === 0) {
Image(this.indexSettingTabIndex === index ? $r('app.media.recommend_icon') : $r('app.media.recommend_icon_active'))
Image(item.channelId === this.indexSettingChannelId ? $r('app.media.recommend_icon') : $r('app.media.recommend_icon_active'))
.width(20)
}
Text(text)
Text(item.name)
.textAlign(TextAlign.Center)
.fontSize(16)
.fontColor(index === this.indexSettingTabIndex ? '#ffffff' : '#ED2800')
.fontColor(item.channelId === this.indexSettingChannelId ? '#ffffff' : '#ED2800')
}
.width('100%')
.justifyContent(FlexAlign.Center)
... ... @@ -237,7 +235,7 @@ struct ChannelDialog {
.alignContent(Alignment.Start)
.height(36)
.onClick(() => {
this.indexSettingTabIndex = index
AppStorage.set('indexSettingChannelId',item.channelId)
})
})
}
... ... @@ -280,7 +278,7 @@ struct ChannelDialog {
.fontSize(14)
.fontColor(this.currentTopNavSelectedItem.channelId === item.channelId ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
if (this.isEditIng && item.myChannel !== '1') {
if (this.isEditIng && item.delPermitted === 1) {
Image($r('app.media.icon_audio_close'))
.width(12)
.margin({ left: 1 })
... ... @@ -292,7 +290,7 @@ struct ChannelDialog {
.backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
.onClick(() => {
if (this.isEditIng) {
if (item.myChannel !== '1') {
if (item.delPermitted === 1) {
this.delChannelItem(index)
}
} else {
... ... @@ -445,10 +443,13 @@ struct ChannelSubscriptionLayout {
@State indexSettingArray: string [] = ['推荐', '热点']
//当前选中的频道
@Link currentTopNavSelectedIndex: number;
@Prop homeChannelList: TopNavDTO []
@Prop indexSettingChannelId: number
@Link myChannelList: TopNavDTO []
@Link moreChannelList: TopNavDTO []
@Link localChannelList: TopNavDTO []
@Link @Watch('onChannelIdsUpdate') channelIds: number []
@Link channelIds: number []
@StorageLink('channelIds') storeChannelIds: string = ''
changeTab: (index: number) => void = () => {
}
//频道弹窗点击切换频道
... ... @@ -461,11 +462,13 @@ struct ChannelSubscriptionLayout {
let channelIdTmp = this.channelIds.splice(index1, 1)
this.myChannelList.splice(index2, 0, tmp[0])
this.channelIds.splice(index2, 0, channelIdTmp[0])
this.storeChannelIds = this.channelIds.join(',')
}
//删除频道
delChannelItem = (index: number) => {
let item = this.myChannelList.splice(index, 1)[0]
this.channelIds.splice(index, 1)
this.storeChannelIds = this.channelIds.join(',')
if (item.moreChannel === '1') {
this.moreChannelList.unshift(item)
}
... ... @@ -477,6 +480,7 @@ struct ChannelSubscriptionLayout {
addChannelItem = (item: TopNavDTO) => {
this.channelIds.push(item.channelId)
this.myChannelList.push(item)
this.storeChannelIds = this.channelIds.join(',')
}
// @State currentTopNavSelectedIndex: number = 0
// @State topNavList: TopNavDTO [] = [
... ... @@ -1987,7 +1991,8 @@ struct ChannelSubscriptionLayout {
dialogController: CustomDialogController | null = new CustomDialogController({
builder: ChannelDialog({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
indexSettingArray: $indexSettingArray,
indexSettingChannelId: $indexSettingChannelId,
homeChannelList: $homeChannelList,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
... ... @@ -2049,13 +2054,8 @@ struct ChannelSubscriptionLayout {
// })
// }
onChannelIdsUpdate(){
AppStorage.SetOrCreate('channelIds', this.channelIds.join(','));
console.log(`AppStorage.get('channelIds')${AppStorage.get('channelIds')}`)
}
aboutToAppear() {
console.log(`myChannelListzz${this.channelIds}}`)
// this.topNavListHandle()
}
... ...
... ... @@ -7,22 +7,26 @@ import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout'
const TAG = 'TopNavigationComponent';
PersistentStorage.persistProp('channelIds', '');
PersistentStorage.persistProp('indexSettingChannelId', 0);
/**
* 顶部页签导航栏/顶导
*/
@Component
export struct TopNavigationComponent {
private tabsController: TabsController = new TabsController()
@Prop _currentNavIndex?: number;
@Prop _currentNavIndex: number;
// 顶导当前选中/焦点下标
@State currentTopNavSelectedIndex: number = 0;
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@StorageProp('indexSettingChannelId') indexSettingChannelId: number = 0
//我的频道id列表
@State @Watch('onChannelIdsUpdate') channelIds: number[] = []
@State channelIds: number[] = []
//本地缓存频道id列表
@StorageProp('channelIds') storageChannelIds: string = ''
@State homeChannelList: TopNavDTO[] = []
// 我的频道列表
@State myChannelList: TopNavDTO[] = []
// 更多频道列表
... ... @@ -31,33 +35,48 @@ export struct TopNavigationComponent {
@State localChannelList: TopNavDTO[] = []
readonly MAX_LINE: number = 1;
//处理接口顶导数据
//处理新闻tab顶导频道数据
topNavListHandle() {
let _channelIds: number [] = []
let _myChannelList : TopNavDTO [] = []
let _myChannelList: TopNavDTO [] = []
let _storageChannelIds: string [] = [] //list1
let defaultMyChannelList: TopNavDTO[] = []
let handledTopNavList = [...this.topNavList]
handledTopNavList.sort((a, b) => {
let defaultList = [...this.topNavList]
defaultList.sort((a, b) => {
return a.num - b.num;
});
handledTopNavList.forEach(item => {
//defaultMyChannelList
defaultList.forEach(item => {
if (item.defaultPermitted === 1 || item.movePermitted === 0 || item.delPermitted === 0 || item.headlinesOn === 1) {
defaultMyChannelList.push(item);
}
if (item.defaultPermitted === 1) {
this.homeChannelList.push(item)
}
})
//有缓存频道id
if (this.storageChannelIds) {
_storageChannelIds = this.storageChannelIds.split(',')
}
defaultMyChannelList.forEach(item => {
item.myChannel = '1'
if (item.defaultPermitted === 1) {
item.homeChannel = '1'
}
let index = handledTopNavList.findIndex(_item => _item.channelId === item.channelId)
let index = defaultList.findIndex(_item => _item.channelId === item.channelId)
if (index !== -1) {
handledTopNavList.splice(index, 1)
defaultList.splice(index, 1)
}
})
handledTopNavList.unshift(...defaultMyChannelList)
handledTopNavList.forEach((item, index) => {
defaultList.unshift(...defaultMyChannelList)
defaultList.forEach((item, index) => {
if (this.storageChannelIds && _storageChannelIds.includes(String(item.channelId))) {
item.myChannel = '1'
}
if (item.channelType === 2) {
item.localChannel = '1'
}
... ... @@ -75,17 +94,24 @@ export struct TopNavigationComponent {
if (item.myChannel === '1') {
_myChannelList.push(item)
_channelIds.push(item.channelId)
}
if (item.moreChannel === '1') {
} else if (item.moreChannel === '1') {
this.moreChannelList.push(item)
}
if (item.localChannel === '1') {
} else if (item.localChannel === '1') {
this.localChannelList.push(item)
}
})
this.channelIds = _channelIds
this.myChannelList = _myChannelList
//缓存首页频道
if (!this.indexSettingChannelId) {
AppStorage.set('indexSettingChannelId', this.homeChannelList[0].channelId)
} else {
let index = this.myChannelList.findIndex(_item => _item.channelId === this.indexSettingChannelId)
this.currentTopNavSelectedIndex = index
}
}
isBroadcast(item: TopNavDTO) {
... ... @@ -126,7 +152,7 @@ export struct TopNavigationComponent {
Image($r('app.media.icon_ren_min_ri_bao'))
.width(72)
.height(29)
.onClick((event: ClickEvent) => {
.onClick(() => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
... ... @@ -165,7 +191,7 @@ export struct TopNavigationComponent {
right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.onClick((event: ClickEvent) => {
.onClick(() => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
... ... @@ -182,8 +208,7 @@ export struct TopNavigationComponent {
// 频道分类list
Stack({ alignContent: Alignment.TopEnd }) {
Tabs({ controller: this.tabsController }) {
Tabs({ index: this.currentTopNavSelectedIndex, controller: this.tabsController }) {
ForEach(this._currentNavIndex === 0 ? this.myChannelList : this.topNavList, (navItem: TopNavDTO, index: number) => {
TabContent() {
if (!this.isBroadcast(navItem)) {
... ... @@ -220,9 +245,11 @@ export struct TopNavigationComponent {
})
// 分类列表最右侧频道设置
if(this._currentNavIndex === 0){
if (this._currentNavIndex === 0) {
ChannelSubscriptionLayout({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
indexSettingChannelId: this.indexSettingChannelId,
homeChannelList: this.homeChannelList,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
... ... @@ -270,15 +297,14 @@ export struct TopNavigationComponent {
}
aboutToAppear() {
if(this._currentNavIndex === 0){
//处理新闻tab顶导频道数据
if (this._currentNavIndex === 0) {
this.topNavListHandle()
}
}
onChannelIdsUpdate() {
aboutToDisappear() {
AppStorage.set('channelIds', this.channelIds.join(','))
console.log(`PersistentStorage channelIds: ${this.channelIds}`)
console.log(`PersistentStorage aboutToAppear: ${this.storageChannelIds}`)
}
onTopNavigationDataUpdated() {
... ...