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

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

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

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的方式创建标题栏，同时添加对应的切换事件

@State arr:string[]=["全部","获得",'兑换']
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

@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

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

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