HarmonyOS鸿蒙Next中tab使用 nestscroll+tab 吸顶条目显示不全

HarmonyOS鸿蒙Next中tab使用 nestscroll+tab 吸顶条目显示不全

@ComponentV2 export struct PageList002 { @Local arr: number[] = []

aboutToAppear() { for (let i = 0; i < 30; i++) { this.arr.push(i) } }

@Local selectedIndex: number = 0 private controller: TabsController = new TabsController() private listScroller: ListScroller = new ListScroller() @Styles listCard() { .backgroundColor(Color.White) .height(72) .width(“100%”) .borderRadius(12) } //Tabs的简单使用可以查看之前的文章 tabs: string[] = [‘生活服务’, ‘办公必备’, ‘出行出差’]; @Builder tabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.selectedIndex === index ? ‘#007DFF’ : ‘#182431’) .fontSize(16) .fontWeight(this.selectedIndex === index ? 500 : 400) .lineHeight(22) .margin({ top: 17, bottom: 7 }) Divider() .strokeWidth(2) .width(20) .margin({bottom:15}) .color(’#007DFF’) .opacity(this.selectedIndex === index ? 1 : 0) }.width(81) }

build() { Scroll() { Column() { Text(“Scroll Area”) .width(“100%”) .height(“40%”) .backgroundColor(’#0080DC’) .textAlign(TextAlign.Center) Column() { Tabs({ index :this.selectedIndex, barPosition: BarPosition.Start, controller: this.controller }) { ForEach(this.tabs, (item: string, index: number) => { TabContent() { }.tabBar(this.tabBuilder(index, item)) }) } .animationMode(AnimationMode.NO_ANIMATION) .animationDuration(0) .height(‘auto’) .onChange((index: number) => { // currentIndex控制TabContent显示页签 if (index==0) { this.listScroller.scrollToIndex(0) } else if (index==1){ this.listScroller.scrollToIndex(10) } else { this.listScroller.scrollToIndex(20) } }) List({ space: 10 ,scroller:this.listScroller}) { ForEach(this.arr, (item: number) => { ListItem() { Text(“item” + item) .fontSize(16) }.listCard() }, (item: string) => item) }.width(“100%”) .edgeEffect(EdgeEffect.Spring) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .onScrollIndex((start: number, end: number, center: number) => { // if (start<10) { // this.selectedIndex=0; // }else if (start>=10&&start<20){ // this.selectedIndex=1; // }else if (start>=20){ // this.selectedIndex=2; // }

        //如果条目比较少很容易划回去
        if (center<10  && this.selectedIndex != 0) {
          this.selectedIndex=0;
        } else if (center>=10&&center<20 && this.selectedIndex != 1){
          this.selectedIndex=1;
        } else if (center>=20 && this.selectedIndex != 2){
          this.selectedIndex=2;
        }

      })

    }.height('100%')
    Blank().height(52)
  }.width("100%")
}
.edgeEffect(EdgeEffect.None)
.friction(0.6)
.backgroundColor('#DCDCDC')
.scrollBar(BarState.Off)
.width('100%')
.height('100%')

} }


更多关于HarmonyOS鸿蒙Next中tab使用 nestscroll+tab 吸顶条目显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题原因：ListItem 被 Tabs 挡住了

解决方案一：

在列表结尾处多渲染一个空的 ListItem

解决方案二：使用 contentEndOffset API 实现列表结尾偏移

更多关于HarmonyOS鸿蒙Next中tab使用 nestscroll+tab 吸顶条目显示不全的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Tab组件使用NestScroll+Tab吸顶时出现条目显示不全问题，通常与布局测量或滚动冲突有关。需检查Tab组件与NestScrollView的嵌套层级关系，确保Tab组件高度未被压缩。可通过调整NestScrollView的测量策略或设置Tab组件的固定高度解决。若使用自定义布局，需确保onMeasure逻辑正确处理滚动容器与Tab的尺寸协商。具体可查阅ArkUI组件文档中Tab与Scroll的联动约束说明。

从代码和截图来看，这个问题是由于Tab组件在嵌套滚动布局中高度计算不准确导致的。以下是几个关键点分析：

  1. 问题核心在于Tabs组件的高度设置使用了’auto’，但在嵌套滚动场景下可能导致高度计算异常。建议改为固定高度值，比如.height(56)。

  2. 当前实现中TabContent是空的，这可能导致布局计算异常。建议至少添加一个占位内容：

TabContent() {
  Column().width('100%').height('100%')
}
  1. 嵌套滚动配置可以优化为：
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST,
  scrollBackward: NestedScrollMode.PARENT_FIRST
})
  1. 建议给外层Column添加明确的height计算：
Column() {
  // 内容
}.height('100%').width('100%')

这些调整应该能解决Tab显示不全的问题。如果仍有问题，可以考虑使用Stack布局将Tabs固定在顶部。

回到顶部