HarmonyOS 鸿蒙Next ArkTs 如何实现一个水平的标题栏，标题栏项比较多时可以左右滑动，每次点击标题栏的某项时，该项居中

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

HarmonyOS 鸿蒙Next ArkTs 如何实现一个水平的标题栏，标题栏项比较多时可以左右滑动，每次点击标题栏的某项时，该项居中

如下两图，点击测试2 时候，测试2 居中，点击测试3 时候测试3居中，

如果点击基金，则因为基金在最左边，不做居中。

目前想通过List 实现，但是方案需要获取

      1.当前点击ListItem 的宽度  2. ListItem 的左侧相对List 的距离， 3. List 整体的占用宽度。

这些如何在点击ListItem的时候获取呢？

76b60864256273fa41691ab5b4a18141.jpg

c0518af8fb0ee585e4e0cfdc49e3853d.jpg

Harmonyos Next教程
8 回复
你这个需求感觉更像tab

tab 要是能实现也行，主要是这个tab 项比较多的时候，需要支持滑动，点金某项的时候，还要自动滑动到中间

试了下tabs 的 .barMode(BarMode.Scrollable) 。貌似可以实现

嗯，这个挺普遍的需求，鸿蒙应该是有做的，只不过居中可能没法做的那么细，你可以试一下

注册一个监听、点击时，设置ScrollAlign.CENTER 居中 属性就可以了、不用那么麻烦
this.scrollController.scrollToIndex(index,true,ScrollAlign.CENTER);

开发者您好，我这里有一个Demo希望能帮到您：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct indexHi{

build(){
Column(){
Tabs({barPosition:BarPosition.End}) {
//内容区域
TabContent() {
//在内容区域继续提供顶部导航栏
Column(){
Tabs({barPosition:BarPosition.Start}){
//顶部导航栏内容
TabContent(){
Text(‘关注的内容’).fontSize(30)
}.tabBar(‘关注’)
.backgroundColor(Color.Black)
TabContent(){
Text(‘视频的内容’).fontSize(30)
}.tabBar(‘视频’)
.backgroundColor(Color.Blue)
TabContent(){
Text(‘游戏的内容’).fontSize(30)
}.tabBar(‘游戏’)
.backgroundColor(Color.Brown)
TabContent(){
Text(‘数码的内容’).fontSize(30)
}.tabBar(‘数码’)
.backgroundColor(Color.Gray)
TabContent(){
Text(‘科技的内容’).fontSize(30)
}.tabBar(‘科技’)
.backgroundColor(Color.Orange)
TabContent(){
Text(‘体育的内容’).fontSize(30)
}.tabBar(‘体育’)
.backgroundColor(Color.Pink)
TabContent(){
Text(‘影视的内容’).fontSize(30)
}.tabBar(‘影视’)
.backgroundColor(Color.Red)
TabContent(){
Text(‘人文的内容’).fontSize(30)
}.tabBar(‘人文’)
.backgroundColor(Color.Yellow)
}
//设置导航栏（滚动）
.barMode(BarMode.Scrollable)
}
.width(‘100%’)
}
.tabBar(‘首页’)


   TabContent() {
     Text(<span class="hljs-string">'推荐的内容'</span>).fontSize(<span class="hljs-number">30</span>)
   }
   .tabBar(<span class="hljs-string">'推荐'</span>)

   TabContent() {
     Text(<span class="hljs-string">'发现的内容'</span>).fontSize(<span class="hljs-number">30</span>)
   }
   .tabBar(<span class="hljs-string">'发现'</span>)

   TabContent() {
     Text(<span class="hljs-string">'我的内容'</span>).fontSize(<span class="hljs-number">30</span>)
   }
   .tabBar(<span class="hljs-string">"我的"</span>)
 }
 <span class="hljs-comment">//设置是否滚动切换，默认是滚动的，false禁止滚动切换</span>
.scrollable(<span class="hljs-literal">false</span>)

}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

自己写一个？

在ArkTS（ArkUI的TypeScript版本）中，实现一个可左右滑动的水平标题栏（TabBar），并使得点击某项时该项居中，你可以使用Swiper组件来承载多个标题项（例如TabItem），并设置其loop属性为false来禁止循环滑动。每个TabItem可以是自定义的，包含文本或图标。

对于点击居中效果，你需要在点击事件中计算被点击项的位置，并动态调整Swiper的scrollOffset或使用Scroll组件的滚动控制功能，使被点击的项居中显示。这通常涉及计算屏幕宽度、标题项宽度以及当前滚动位置。

如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部