HarmonyOS 鸿蒙Next 主页面通过底部tab嵌套,子页面想实现可见刷新怎么操作
HarmonyOS 鸿蒙Next 主页面通过底部tab嵌套,子页面想实现可见刷新怎么操作 主页面通过底部tab嵌套,子页面想实现可见刷新怎么操作
2 回复
简版demo:
import { One } from './view/One'
import { Two } from './view/Two'
import { Three } from './view/Three'
class TabClass {
title: string = ''
index: number = 0
img?: ResourceStr
selectedImg?: ResourceStr
}
const tabsData: TabClass[] = [
{
title: 'One',
index: 0,
},
{
title: 'Two',
index: 1,
},
{
title: 'Three',
index: 2,
}
]
@Entry
@Component
struct TabPage2 {
private tabsController: TabsController = new TabsController();
@State currentIndex: number = 0;
@State oneNum: number = 0;
@State twoNum: number = 0;
@State threeNum: number = 0;
@Builder
customBuilderTab(item: TabClass) {
Column() {
Text(item.title)
.fontSize(this.currentIndex === item.index ? 15 : 12)
.fontColor(this.currentIndex === item.index ? '#1698CE' : '#6B6B6B')
.margin({ top: 5 })
}
.width('100%')
.height(50)
.alignItems(HorizontalAlign.Center)
.border({
width: { top: 0.5 },
color: Color.Grey
})
.onClick(() => {
if (item.index === 0) {
this.oneNum += 1
} else if (item.index === 1){
this.twoNum += 1
} else {
this.threeNum += 1
}
this.currentIndex = item.index
this.tabsController.changeIndex(this.currentIndex)
})
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End ,controller:this.tabsController}) {
TabContent() {
One({oneNum:$oneNum})
}.tabBar(this.customBuilderTab(tabsData[0]))
TabContent() {
Two()
}.tabBar(this.customBuilderTab(tabsData[1]))
TabContent() {
Three()
}.tabBar(this.customBuilderTab(tabsData[2]))
}
.animationDuration(0)
.scrollable(false)
.width('100%')
.barHeight(50)
}
.width('100%')
.height('100%')
.backgroundColor(Color.White)
}
}
// ./view/One.ets
@Component
export struct One {
@Link @Watch("oneNumState") oneNum: number ;
aboutToAppear(): void {
console.log('aboutToAppear---')
}
oneNumState(prop: string){
console.log('oneNumState---',prop)
}
build() {
Column() {
Text(`One - ${this.oneNum}`)
}
.width('100%')
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next 主页面通过底部tab嵌套,子页面想实现可见刷新怎么操作的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中,若想在Next版本的主页面通过底部tab嵌套,并在子页面中实现可见刷新,可以采用以下方式:
-
使用PageSlider组件: 在主页面中,利用PageSlider组件实现底部tab的切换功能。PageSlider可以包含多个Page组件,每个Page组件对应一个子页面。
-
子页面实现刷新功能: 在每个子页面中,可以通过监听页面的可见性变化来实现刷新功能。HarmonyOS提供了页面生命周期的回调接口,如
onPageShow
和onPageHide
,可以在这些回调中编写刷新逻辑。 -
数据刷新: 当子页面变为可见时(如在
onPageShow
回调中),触发数据刷新操作,如从服务器获取最新数据或重新计算页面内容。 -
UI更新: 数据刷新完成后,更新UI组件以显示最新的数据。
请注意,确保在子页面的onPageHide
回调中停止任何可能仍在运行的数据刷新操作,以避免资源浪费。
如果问题依旧没法解决请联系官网客服,官网地址是: https://www.itying.com/category-93-b0.html,