HarmonyOS 鸿蒙Next this.tabsController.changeIndex(this.currentIndex) 不走每一个子组建的 onPageShow
HarmonyOS 鸿蒙Next this.tabsController.changeIndex(this.currentIndex) 不走每一个子组建的 onPageShow
Index 页面,有4个tab,tab详情点击进入到第二个页面,从第二个页面返回到Index 页面,怎样刷新每个 tab 子组建里面的接口?
2 回复
tabsController是不走onPageShow的,可以参考以下demo实现:
//index.ets:
import { SecondPage } from './SecondPage'
import { ThirdPage } from './ThirdPage'
@Entry
@Component
struct TabsExample {
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
@State mainPageState:boolean = false
@Builder tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider()
.strokeWidth(2)
.color('#007DFF')
.opacity(this.currentIndex === index ? 1 : 0)
}.width('100%')
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
SecondPage({mainPageState:this.mainPageState,currentIndex:this.currentIndex}).width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.tabBuilder(0, 'green'))
TabContent() {
ThirdPage({mainPageState:this.mainPageState,currentIndex:this.currentIndex}).width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.tabBuilder(1, 'blue'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar(this.tabBuilder(2, 'yellow'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar(this.tabBuilder(3, 'pink'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
this.currentIndex = index
})
.width('100%')
.height('100%')
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}.width('100%')
}
onPageShow(): void {
console.log('index--- onPageShow')
this.mainPageState = true
}
onPageHide(): void {
console.log('index--- onPageHide')
this.mainPageState = false
}
}
import { router } from '@kit.ArkUI';
import { FaultLogger } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
export struct SecondPage {
@State message: string = 'Hello World';
@Link @Watch('mainIsShow') mainPageState:boolean
@Link @Watch('mainIsShow') currentIndex: number
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold).onClick(()=>{
router.pushUrl({
url:'pages/DetailPage',
})
})
}
.width('100%')
}
.height('100%')
}
mainIsShow(){
if (this.currentIndex == 0) {
console.log('green显示了--',this.mainPageState)
}
}
aboutToAppear(): void {
console.log('firstPAGE--- aboutToAppear')
}
onPageShow(): void {
console.log('firstPAGE--- onPageShow')
}
onPageHide(): void {
console.log('firstPAGE--- onPageHide')
}
aboutToRecycle(): void {
console.log('firstPAGE--- aboutToRecycle')
}
}
import { router } from '@kit.ArkUI';
import { FaultLogger } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
export struct ThirdPage {
@State message: string = 'Hello World';
@Link @Watch('mainIsShow') mainPageState:boolean
@Link @Watch('mainIsShow') currentIndex: number
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold).onClick(()=>{
router.pushUrl({
url:'pages/DetailPage',
})
})
}
.width('100%')
}
.height('100%')
}
mainIsShow(){
if (this.currentIndex == 1) {
console.log('blue显示了--',this.mainPageState)
}
}
aboutToAppear(): void {
console.log('firstPAGE--- aboutToAppear')
}
onPageShow(): void {
console.log('firstPAGE--- onPageShow')
}
onPageHide(): void {
console.log('firstPAGE--- onPageHide')
}
aboutToRecycle(): void {
console.log('firstPAGE--- aboutToRecycle')
}
}
更多关于HarmonyOS 鸿蒙Next this.tabsController.changeIndex(this.currentIndex) 不走每一个子组建的 onPageShow的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在 HarmonyOS 开发中,如果遇到 this.tabsController.changeIndex(this.currentIndex)
不触发每个子组件的 onPageShow
方法的问题,这通常与页面生命周期管理或组件状态更新有关。
首先确认 this.tabsController
是否已正确初始化并绑定到页面控制器。changeIndex
方法负责切换页面索引,但它不直接控制组件的显示逻辑。组件的 onPageShow
应当在页面实际可见时被调用,这通常是由框架内部管理的。
检查以下几点:
- 组件注册:确保所有子组件都已正确注册并在页面中引用。
- 页面栈:确认
changeIndex
后页面栈是否正确更新,即目标页面是否被正确推送到栈顶。 - 生命周期回调:查看是否有其他地方(如自定义逻辑)阻止了
onPageShow
的正常触发。 - 版本兼容性:确认 HarmonyOS SDK 和开发工具链是否为最新版本,以避免已知的bug。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html