《仿盒马》app开发技术分享-- 分类模块顶部导航列表（15）

技术栈

Appgallery connect

开发准备

上一节我们实现了购物车商品列表的大部分功能，实现了商品的添加、删除、增减、价格计算等业务，并且都跟云端进行通信。现在我们继续对项目进行改造，这一节我们要改造的内容是分类页，这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式，并且我们的金刚区也要实现分类页的点击联动

功能分析

1.分类列表 分类列表我们要注意首页跳入切换到对应item的情况，点击时item对应的字体、背景色等状态的变化，以及list的切换

代码实现

首先我们要对金刚区的数据进行一个改造

{ "objectTypeName": "split_layout", "fields": [ {"fieldName": "split_id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "txt", "fieldType": "String"}, {"fieldName": "url", "fieldType": "String"}, {"fieldName": "router", "fieldType": "String"}, {"fieldName": "is_login", "fieldType": "Boolean"}, {"fieldName": "child_id", "fieldType": "Integer"}, {"fieldName": "bt_state", "fieldType": "Integer"} ], "indexes": [ {"indexName": "splitId_Index", "indexList": [{"fieldName":"split_id","sortType":"ASC"}]} ], "permissions": [ {"role": "World", "rights": ["Read"]}, {"role": "Authenticated", "rights": ["Read", "Upsert"]}, {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]} ] } 我们加上了child_id，有了这个参数能更好的去查询对应的数据

实体类

export class SplitLayoutModel { split_id: number; txt: string; url: string; router: string; is_login: boolean; child_id: number; bt_state: number;

constructor() {
}

getFieldTypeMap():  Map<string, string> {
    let fieldTypeMap = new Map<string, string>();
    fieldTypeMap.set('split_id', 'Integer');
    fieldTypeMap.set('txt', 'String');
    fieldTypeMap.set('url', 'String');
    fieldTypeMap.set('router', 'String');
    fieldTypeMap.set('is_login', 'Boolean');
    fieldTypeMap.set('child_id', 'Integer');
    fieldTypeMap.set('bt_state', 'Integer');
    return fieldTypeMap;
}

getClassName(): string {
    return 'split_layout';
}

getPrimaryKeyList(): string[] {
    let primaryKeyList: string[] = [];
    primaryKeyList.push('split_id');
    return primaryKeyList;
}

getIndexList(): string[] {
    let indexList: string[] = [];
    indexList.push('split_id');
    return indexList;
}

getEncryptedFieldList(): string[] {
    let encryptedFieldList: string[] = [];
    return encryptedFieldList;
}

setSplit_id(split_id: number): void {
    this.split_id = split_id;
}

getSplit_id(): number  {
    return this.split_id;
}

setTxt(txt: string): void {
    this.txt = txt;
}

getTxt(): string  {
    return this.txt;
}

setUrl(url: string): void {
    this.url = url;
}

getUrl(): string  {
    return this.url;
}

setRouter(router: string): void {
    this.router = router;
}

getRouter(): string  {
    return this.router;
}

setIs_login(is_login: boolean): void {
    this.is_login = is_login;
}

getIs_login(): boolean  {
    return this.is_login;
}

setChild_id(child_id: number): void {
    this.child_id = child_id;
}

getChild_id(): number  {
    return this.child_id;
}

setBt_state(bt_state: number): void {
    this.bt_state = bt_state;
}

getBt_state(): number  {
    return this.bt_state;
}

static parseFrom(inputObject: any): SplitLayoutModel {
    let result = new SplitLayoutModel();
    if (!inputObject) {
        return result;
    }
    if (inputObject.split_id) {
        result.split_id = inputObject.split_id;
    }
    if (inputObject.txt) {
        result.txt = inputObject.txt;
    }
    if (inputObject.url) {
        result.url = inputObject.url;
    }
    if (inputObject.router) {
        result.router = inputObject.router;
    }
    if (inputObject.is_login) {
        result.is_login = inputObject.is_login;
    }
    if (inputObject.child_id) {
        result.child_id = inputObject.child_id;
    }
    if (inputObject.bt_state) {
        result.bt_state = inputObject.bt_state;
    }
    return result;
}

}

然后我们在金刚区的点击事件里传递当前点击的下标 先定义 @State pos_check:number=0 我们在金刚区组件内定义一个带参数的回调 private onItemClick?: (pos:number) => void 调用 .onClick(()=>{ this.onItemClick!(index) })

在index页面拿到下标后控制tabs切换到分类，并且传入下标 SplitLayout({listData:this.splitList,onItemClick:(pos)=>{ this.controller.changeIndex(1); this.pos_check=pos }}) 分类页顶部导航列表自定义组件 import { CustomImageGridDialog } from "../dialog/CustomImageGridDialog"; import { cloudDatabase } from "@kit.CloudFoundationKit"; import { split_layout } from "../clouddb/split_layout"; import { SplitLayoutModel } from "../entity/SplitLayoutModel"; import { hilog } from "@kit.PerformanceAnalysisKit";

@Preview @Component export struct Classification { private listScroller: Scroller = new Scroller(); @Link selectedIndex: number @State list: SplitLayoutModel[] = [] @State flag:boolean=false private onItemClick?: (child_id:number) => void

async aboutToAppear(): Promise { let databaseZone = cloudDatabase.zone('default'); let condition = new cloudDatabase.DatabaseQuery(split_layout); let listData = await databaseZone.query(condition); let json = JSON.stringify(listData) let data2:SplitLayoutModel[]= JSON.parse(json) this.list=data2 hilog.error(0x0000, 'testTag', Failed to query data, code: ${this.list}); this.flag=true }

private dialogController: CustomDialogController = new CustomDialogController({ builder: CustomImageGridDialog({ select:this.selectedIndex, dataSource: this.list, onItemSelected: (item: number) => { this.listScroller.scrollToIndex(item, true, ScrollAlign.CENTER) } }), alignment: DialogAlignment.Top, customStyle:true });

build() { Row() { List({scroller:this.listScroller,space:10}){ ForEach(this.list, (item:SplitLayoutModel,index:number) => { ListItem(){ Column(){ Image(item.url) .width(40) .height(40) .borderRadius(20) .border({width:this.selectedIndex === index?2:0,color:"#409EFF"}) Text(item.txt) .textAlign(TextAlign.Center) .fontColor(Color.Black) .fontSize(10) .padding(2) .margin({top:5}) .fontColor(this.selectedIndex === index?"#FFFFFF":"#000000") .backgroundColor(this.selectedIndex === index ? '#409EFF' : '#FFFFFF') .borderRadius(this.selectedIndex === index ? 15:0) } .onClick(()=>{ if (this.selectedIndex === index) { this.selectedIndex = 0 } else { this.selectedIndex = index }

          this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
        })


      }

    })
  }
  .scrollBar(BarState.Off)
  .height(65)
  .width('90%')
  .listDirection(Axis.Horizontal)

  Blank()

  Column(){
    Text("全")
      .fontSize(14)
      .fontColor(Color.Black)
    Text("部")
      .fontColor(Color.Black)
      .fontSize(14)
    Image($r('app.media.all'))
        .height(20)
        .width(20)
  }
  .onClick(()=>{
    this.dialogController.open()
  })
  .padding(5)
}
.justifyContent(FlexAlign.SpaceBetween)
.height(90)
.width('100%')
.margin({top:20})

}

} index页面引用 Classification({selectedIndex:this.pos_check})

到这里我们的就全部实现了