HarmonyOS 鸿蒙Next tabs 组件异步赋值，tabBar 不展示，tabContent 正常展示
HarmonyOS 鸿蒙Next tabs 组件异步赋值，tabBar 不展示，tabContent 正常展示
interface newRepeatItem {
item: string,
index: number
}
@State newTabsList: Array<string> = []
Tabs({ barPosition: BarPosition.Start }) {
Repeat(this.newTabsList)
.each((obj: newRepeatItem) => {
TabContent() {
Text(obj.item)
}.width('100%')
.height('100%')
.backgroundColor(Color.Brown)
.tabBar(obj.item)
})
.key((item: string, index: number) => index.toString()) }
.onChange((index: number) => {
this.currentIndex = index
})
.barHeight(50)
.barMode(BarMode.Scrollable)
}
setTimeout(() => {
this.newTabsList.push('关注1')
this.newTabsList.push('关注2')
this.newTabsList.push('关注3')
}, 1000)
更多关于HarmonyOS 鸿蒙Next tabs 组件异步赋值，tabBar 不展示，tabContent 正常展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
参考demo
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) tabArray: Array<number> = [0, 1, 2]
[@State](/user/State) focusIndex: number = 0
[@State](/user/State) index: number = 0
private controller: TabsController = new TabsController()
[@State](/user/State) test: boolean = false
// 单独的页签
[@Builder](/user/Builder) Tab(tabName: string, tabItem: number, tabIndex: number) {
Row({ space: 20 }) {
Text(tabName).fontSize(18)
}
.justifyContent(FlexAlign.Center)
.constraintSize({ minWidth: 35 })
.width('33.3%')
.height(30)
.borderRadius({ topLeft: 10, topRight: 10 })
.onClick(() => {
this.controller.changeIndex(tabIndex)
this.focusIndex = tabIndex
})
.backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")
}
build() {
Column() {
Column() {
// 页签
Row({ space: 7 }) {
Row() {
ForEach(this.tabArray, (item: number, index: number) => {
this.Tab("页签 " + item, item, index)
})
}
.justifyContent(FlexAlign.Start)
}
.width('80%')
.backgroundColor("#ffb7b7b7")
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabArray, (item: number, index: number) => {
TabContent() {
Text('我是页面 ' + item + " 的内容")
.height(300)
.width('100%')
.fontSize(30)
}
})
}
.animationDuration(100)
.onChange((index: number) => {
this.focusIndex = index
})
}
.alignItems(HorizontalAlign.Start)
.width('100%')
}
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next tabs 组件异步赋值，tabBar 不展示，tabContent 正常展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
[@State](/user/State) newTabsList: Array<string> = []
这个错了
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>你想要Android的List、RecyclerView类似的Adpter咯~~实现
IDataSource接口
官网有现成的类了，直接复制即可
在HarmonyOS鸿蒙系统中，针对Next tabs组件异步赋值导致tabBar不展示而tabContent正常展示的问题，通常是由于tabBar的更新时机与数据赋值时机不一致所导致。
解决此问题，你可以尝试以下方法：
-
确保数据赋值完成后再进行UI更新：在异步数据获取完成后，使用
@State或@Link等状态管理工具确保tabBar的数据已经正确赋值，再触发UI更新。 -
检查tabBar数据格式：确保你传递给tabBar的数据格式符合其要求，包括数据类型和结构。
-
使用组件的生命周期方法：在组件的
onPageLoaded或onAttached等生命周期方法中确保tabBar的数据已经准备完毕。 -
检查样式和布局：有时候tabBar不展示可能是由于样式或布局问题导致的，检查相关CSS或布局代码是否有误。
-
调试和日志：使用鸿蒙系统的调试工具，打印tabBar相关的数据和状态，查看是否有异常。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
