练手功能,因为Tabs和TabsContent组合是可以达到上面效果的

这里面的处理点是 Swiper  虽然可以通过index($$this.index) 来设置展示哪个item,但是没有动画效果

 而SwiperController 虽然可以切换到上一个和下一个,但是也只能一个一个来, 所以跨索引切换就需要处理了
同时还要兼顾swiper改变后,tabs索引也要变更. 这样tabs变更-->swiper变更-->tabs变更进入循环, 需要特殊处理
 

import BuiTabs, { BuiTabsAttribute, BuiTabsController } from '../bui/BuiTabs';

@Component
export default struct BuiTabSwiperDemo {
  private swiperController: SwiperController = new SwiperController()
  private tabController:BuiTabsController = {} as BuiTabsController
  buttons:BuiTabsAttribute[] = [
    {label:"红色"}  ,
    {label:"蓝色"} ,
    {label:"黄色"},
  ]

  @State isTouching:boolean = false

  @State currentIndex:number=0;

  build() {
    Column() {
       this.buildContent()
    }
  }

  @Builder buildContent(){
     BuiTabs({
       controller: this.tabController,
       buttons: this.buttons,
       click: (btn: BuiTabsAttribute, index: number) => {
          while(this.currentIndex!=index){ //解决跨索引 1 ~ 3 这样的切换
            this.isTouching=false;
            if(this.currentIndex>index){
              this.currentIndex--;
              this.swiperController.showPrevious();
            }else if(this.currentIndex<index){
              this.currentIndex++;
              this.swiperController.showNext();
            }
          }
          this.currentIndex=index;
       }
    }).margin({bottom:10})

    Swiper(this.swiperController){
      Column() {
        Text(`我是第1个Tab`)
      }.width('100%').height(300).backgroundColor("#f5f5f5")
      Column() {
        Text(`我是第2个Tab`)
      }.width('100%').height(300).backgroundColor(Color.Orange)
      Column() {
        Text(`我是第3个Tab`)
      }.width('100%').height(300).backgroundColor(Color.Brown)
    }.onChange((index:number)=>{
      if(this.isTouching) { //人为拖动才改变,否则认为是tabs改变引起
        this.currentIndex=index;
        this.tabController.changeIndex(index)
      }
    }).onTouch((event:TouchEvent)=>{
        this.isTouching=true;  //人为拖动
    }).onAnimationEnd(()=>{
      setTimeout(()=>{
        this.isTouching=false;
      },100)
    })
    //这个效果并不好,无动画
    //.index($$this.currentIndex)
  }
}

本章代码地址: https://gitee.com/jifsu_167/open-harmony-demo