《仿盒马》app开发技术分享-- 积分页组件新增（64）

## 技术栈

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 })

```

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