HarmonyOS Tabs Component

🎮️Tabs

Tabs(){
	TabContent(){
	}
}

example

    Tabs({barPosition:BarPosition.End}){
        ForEach(this.ilist,(item,index)=>{
          TabContent(){
            Column( ){
              Text(item.title)
                .fontSize('18fp')
            }
            .width('100%')
            .height('100%')
            .backgroundColor('#FFFFFF')

          }
          .tabBar(this.tabTile(index,item.title,item.url1,item.url2))

        })
       }
      .vertical(false)
      .scrollable(true)//huadong
      .animationDuration(400)
      .width('100%')
      .backgroundColor('#fffff1')
      //.height('100vp')
      .onChange((value) => {
         this.curIndex = value;
      })
      

🔮tab data

interface  INav{
  title:string;
  url1:Resource;
  url2 :Resource;

}
//...
  @State ilist:INav[]=[{
    title:'index',
    url1:$r('app.media.icon'),
    url2:$r('app.media.icon2')
  },
    {
      title:'hot',
      url1:$r('app.media.icon'),
      url2:$r('app.media.icon2')
    },
    {
      title:'my',
      url1:$r('app.media.icon'),
      url2:$r('app.media.icon2')
    }
  ];

barPosition:BarPosition.End

barPosition:BarPosition.Start

🪅Component swpier

@Component
export default  struct swiper1{

  public ilist:Array<Resource> =[
    $r('app.media.22222'),
    $r('app.media.11111'),
    $r('app.media.22222')
  ]
  build(){

    Column(){
      Swiper(){
        ForEach(this.ilist,(item,index)=>{
          Image(item).width('98%').height('160vp')
        })
      }
      .autoPlay(true)
      .interval(3000)
      .duration(400)
      .indicator(true)
      .itemSpace(5)
    }
  }
}

添加图片

index import

      swipert()
         .height('80%')
         .margin('10vp')

🎰Component nav Grid

interface inavit
{
  title:string,
  img:Resource
}

@Component
export default  struct homenav{

  public ilist:Array<inavit> =[
  {title:'w',img: $r('app.media.110')},
{title:'z',img: $r('app.media.111')},
{title:'r',img: $r('app.media.120')},
{title:'y',img: $r('app.media.129')},
{title:'j',img: $r('app.media.140')},
{title:'y',img: $r('app.media.150')},
{title:'c',img:  $r('app.media.163')},
 {title:'j',img: $r('app.media.173')}
  ]
  build(){

    Column(){
      Grid(){

          ForEach(this.ilist,(item:inavit,index:number)=>{
            GridItem(){
              Column({space:5}){


                Image(item.img).width('50vp').height('50vp')
                Text(item.title).fontSize('18fp')
              }
            }
          })


        }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap('10')
      .margin('10')
      //.backgroundColor()

      }
    }



}

index import

    homenav1()
      .height('60%')

🧸Component List

@Component
export default  struct homelist{

  build(){

    Column(){
      List()
      {
        ListItem(){

          Image($r('app.media.666'))
            .objectFit(ImageFit.Cover)
            .aspectRatio(2.7)
            .margin('10vp')
         }
        ListItem(){

          Image($r('app.media.777'))
            .objectFit(ImageFit.Cover)
            .aspectRatio(2.7)
            .margin('10vp')
        }
      }

      // Text('hhhh')
    }
  }
}

Err
does not meet UI component syntax.
组件声明错误