HarmonyOS 鸿蒙Next Tabs 顶部导航栏字体较长时超出父容器,导致多个tab选中后不可见,如何实现在选中不同tab后,顶部导航栏能滑动到可见位置

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Tabs 顶部导航栏字体较长时超出父容器,导致多个tab选中后不可见,如何实现在选中不同tab后,顶部导航栏能滑动到可见位置

cke_193.pngabs 顶部导航栏字体比较长会超出父容器,如果手滑到第三个tab的时候,onchange可以改变文本样式,但是tab导航栏标题选中后不可见,怎么可以让它选中不同tab后,顶部导航栏也能滑动到可见位置

13 回复

麻烦在看下

在低版本手机滑动能正常显示,高版本复现了该问题,已将该问题反馈相关人员,请耐心等待。

1.barHeight(0) 隐藏默认tabBar的高度

2.删除。tabbar属性

3.定义一个list再tabs的控件上面。 设置scroller  当点击listitem的时候改变index 当滑动tab的onchange方法回调后也修改下index的值就可以了

地下tab滑动咋实现list也跟着滑动到可见为止 用scrolltoindex效果不好

大概是实现了 但是好生硬

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

关闭tab头,使用横向List实现就行了,List和Scroller都有跳转到指定元素的事件

但是使用横向的list的话,下面viewpager的手动左右滑动就没有了

调用tabs的切换方法不行吗

已经实现,感谢感谢

当前我滑动显示pink,想让上面导航条也自动滑动到用户可见的地方

cke_375.png

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsExample {
[@State](/user/State) fontColor: string = '#182431'
[@State](/user/State) selectedFontColor: string = '#007DFF'
[@State](/user/State) currentIndex: number = 0
private controller: TabsController = new TabsController()

[@Builder](/user/Builder) TabBuilder(index: number, name: string) {
Row() {
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 })
}
.padding({ left: 16, top: 6, right: 16, bottom: 6 })
.borderRadius(16)
.margin({ left: 12 });
}

build() {
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.TabBuilder(0, 'reengreengreen'))

TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.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.Scrollable)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.barHeight(60)
.animationDuration(100)
.scrollable(true)
.layoutWeight(1)
.vertical(false)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}.width('100%')
}
}

针对HarmonyOS 鸿蒙Next Tabs 顶部导航栏字体较长时超出父容器,导致多个tab选中后不可见的问题,可以采取以下技术方案实现选中不同tab后,顶部导航栏能滑动到可见位置:

  1. 动态调整Tab布局:在Tab项文字较长时,考虑采用省略号显示或自动换行策略,以减少每个Tab项的宽度,从而避免超出父容器。

  2. 启用滚动视图:确保顶部导航栏的父容器具备滚动功能,可通过设置ScrollView或HorizontalScrollView组件来实现。这样,当用户选中某个不可见的Tab时,可以手动或通过编程方式滚动到该Tab的位置。

  3. 编程控制滚动:在Tab选中事件中,通过编程方式获取被选中Tab的位置,并调用ScrollView的smoothScrollToscrollTo方法,将导航栏滚动到该Tab的位置,使其可见。

  4. 优化Tab布局算法:如果Tab数量较多,可以考虑优化Tab的布局算法,如采用分页显示、固定Tab数量加滑动切换等方式,以提高用户体验。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部