Set scrollable(false) for the outer Tabs component to implement a combination of nested bottom navigation and top navigation for the two layers of Tabs components. The sample code is as follows:
@Entry
@Component
struct TwoLayerTabNestedSliding {
build() {
Column() {
Tabs({ barPosition: BarPosition.End }) {
TabContent() {
Column() {
Tabs() {
TabContent() {
Text('Focus on content')
}
.tabBar('follow with interest')
TabContent() {
Text('The content of the game')
}
.tabBar('game')
}
}
.backgroundColor('#f08a34')
.width('100%')
}
.tabBar('home page')
TabContent() {
Column() {
Tabs() {
TabContent() {
Text('The content of technology')
}
.tabBar('science and technology')
TabContent() {
Text('The content of the video')
}
.tabBar('video')
}
}
.backgroundColor('#f08a34')
.width('100%')
}
.tabBar('find')
}
.scrollable(false)
}
.width('100%')
.height('100%')
}
}