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

开发者您好，我这里有一个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>)
}
}
}