## 技术栈

Appgallery connect

## 开发准备

上一节我们创建了积分页，给页面添加了标题栏和积分展示的组件。这一节我们继续丰富积分页的内容，添加引导栏，积分明细展示等区域

## 功能分析

因为页面的关联不强，我们采用组件引入的方式实现引导栏，同时，在下方继续添加对应的tabs组件,方便我们积分明细的展示和查看

## 代码实现

首先我们实现引导栏的内容

```css

import router from '@ohos.router'

@Component

export struct CenterButton {

  iconList:ESObject[]=[{

    icon:$r('app.media.jifendengji'),

    name:"积分等级"

  },{

    icon:null,

    name:""

  },{

    icon:$r('app.media.jifenduihuan'),

    name:"积分兑换"

  }]

  @Builder

  IconBar(){

    Row(){

      ForEach(this.iconList,(item:ESObject,index)=>{

        this.IconButton(item,index)

      })

    }

    .IconBarBg()

    .height(80)

    .borderRadius(10)

    .width('100%')

    .padding({left:50,right:50})

    .justifyContent(FlexAlign.SpaceBetween)

  }

  @Builder

  IconButton(item:ESObject,index:number){

    Column(){

      Image(item.icon)

        .height(20)

        .width(20)

        .objectFit(ImageFit.Contain)

        .interpolation(ImageInterpolation.High)

      Text(item.name)

        .margin({top:6})

        .fontColor("#000000")

        .fontSize(14)

    }

    .onClick(()=>{

      switch (item.name) {

        case "积分等级":

          router.pushUrl({url:''})

          break;

        case "":

          break;

        case "积分兑换":

          router.pushUrl({url:''})

          break;

        default:

          break;

      }

    })

  }

  build() {

    Row() {

      this.IconBar()

    }

    .padding({left:12,right:12})

    .margin({top:14})

    .width(

      '100%'

    )

  }

}

@Extend(Row) function IconBarBg(){

  .linearGradient({

    angle: 180,

    colors: [[0xff0000, 0], [0xff6666, 0.5], [0xffffff, 1]]

  })

}

```

在引导栏中我们给按钮添加点击事件，方便我们后期跳转到对应的页面。

然后我们开始实现tabs，我们通过@Builder的方式创建标题栏，同时添加对应的切换事件

```css

@State arr:string[]=["全部","获得",'兑换']

  @State fontColor: string = '#182431'

  @State selectedFontColor: string = '#007DFF'

  @State currentIndex: number = 0

  private controller: TabsController = new TabsController()

```

```css

@Builder TabBuilder(index: number, name: string) {

    Column() {

      Text(name)

        .fontColor(this.currentIndex === index ? this.fontColor : this.fontColor)

        .fontSize(this.currentIndex === index ? 16:15)

        .fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal)

        .lineHeight(22)

      Divider()

        .strokeWidth(3)

        .width(30)

        .color(0xff0000)

        .opacity(this.currentIndex === index ? 1 : 0)

        .margin({top:2})

    }

    .height(50)

    .width('100%')

    .justifyContent(FlexAlign.Center)

  }

```

创建完标题栏我们添加tabs

```css

      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {

        ForEach(this.arr,(item:string,index)=>{

          TabContent() {

            Column(){

              if (item=='全部') {

              }

              if (item=='获得') {

              }

              if (item=='兑换') {

              }

            }

          }

          .tabBar(this.TabBuilder(index, item))

          .borderRadius(10)

          .backgroundColor(Color.White)

        })

      }

      .vertical(false)

      .barMode(BarMode.Fixed)

      .barWidth('100%')

      .barHeight(50)

      .backgroundColor(Color.White)

      .animationDuration(300)

      .onChange((index: number) => {

        this.currentIndex = index

      })

      .width('100%')

      .height('100%')

      .layoutWeight(1)

      .margin({ top: 10 })

```

到这里我们的积分页组件就全部添加上了，后续我们开始实现对应的逻辑