HarmonyOS 鸿蒙Next：分享一个基于（状态管理V2）的Tabs组件SlidingTabs，更灵活的布局和更丝滑的Tab切换，支持自定义TabItem和TabIndicator

HarmonyOS 鸿蒙Next：分享一个基于（状态管理V2）的Tabs组件SlidingTabs，更灵活的布局和更丝滑的Tab切换，支持自定义TabItem和TabIndicator

SlidingTabs

简介

SlidingTabs是一个基于状态管理V2的Tabs组件，相比系统的Tabs组件有以下优势和特点：

1. SlidingTabs布局更加灵活，不与Swiper强制绑定在一起，用户可根据需求自定义搭配
2. SlidingTabs可自定义TabItem和TabIndicator满足更多个性化需求
3. SlidingTabs有更好的Tab切换体验

项目地址

https://gitee.com/XiaoQiWen/sliding-tabs

下载安装

ohpm install [@xqw](/user/xqw)/sliding-tabs
 

预览效果

使用说明

[@Local](/user/Local) tabs = ["全部","我的自选","持仓"]
tabController = new SlidingTabController()
SlidingTabs({
    tabs: this.tabs,
    barMode : "fixed",
    tabController: this.tabController,
    tabStyle:{
      showIndicator:false,
      indicatorAlignment:Alignment.Top,
      indicatorWidthWrapTab:true,
      indicatorPadding:{left:20,right:20}
    }
  })

搭配Swiper使用

SlidingTabs({
    tabs: this.scrollTabs,
    barMode : "scroll",
    tabController: this.tabController4,
    tabStyle:{
      indicatorWidthWrapTab:true,
      fontColorSelect:Color.Blue
    }
  })
  Swiper(this.tabController4.swiperController){
    ForEach(this.scrollTabs,(item:string,index)=>{
      Stack()
      {
        Text("This Is Page -> "+item)
      }
        .width('100%').height('100%')
    })
  }.layoutWeight(1)
  .onGestureSwipe((index,extraInfo)=>{
    this.tabController4.swiperOnGestureSwipe(index,extraInfo)
  })
  .onAreaChange((oldValue,newValue)=>{
    this.tabController4.swiperOnAreaChange(oldValue,newValue)
  })
  .onAnimationStart((index,targetIndex,extraInfo)=>{
    this.tabController4.swiperOnAnimationStart(index,targetIndex,extraInfo)
  })

属性说明

ITabStyle属性说明

更多使用请查看Index.ets

问题反馈

使用过程中有任何使用问题和Bug都可以提Issue,我会抽空查看和解决问题的。