## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了分类页面的顶部导航栏全选弹窗列表，并实现了跟顶部列表的点击选中联动效果，这一节我们要实现的功能是，分类模块的左侧列表，它同样也需要跟弹窗列表的点击，顶部列表的点击有联动的效果

## 功能分析

1.列表展示

列表的数据展示，我们要根据当前选中的顶部列表child_id作为前提条件进行数据的查询，因为我们的顶部列表是一个大的分类，比如酒水饮料，他可能分为 啤酒、白酒、红酒这些细分品类，当我们点击其他品类，左侧的列表同时也要进行切换。这里比较考验我们对联动效果的整体把控，要实现这个功能，我们需要把弹窗选中的id，列表选中的id，进入页面默认选中情况下的id利用起来，作为列表查询的条件进行数据的查询，以及后续list列表数据的展示

## 代码实现

首先我们优先修改弹窗以及列表本身点击后传出的数据

 private  onItemClick?: (pos:number,child_id:number) => void

 我们只需要在点击事件的回调中把相对应的id返回出去

 Classification({selectedIndex:this.pos_check,onItemClick:(pos,child_id)=>{

                this.pos_check=pos

                this.pos_check_id=child_id

              }})

在调用页面直接取值即可，其他的弹窗以及列表逻辑没有相应的修改

然后我们把分类页面定义的leftListItemChildId 修改为topListItemChildId，这样更有助于我们理解参数定义的意思

然后添加监听事件

@Link @Watch("onChange") topListItemChildId: number;

在监听事件中我们根据定义的id 来进行左侧列表数据的查询

 async onChange(){

    let condition = new cloudDatabase.DatabaseQuery(category_left_list);

      condition.equalTo("child_id",this.topListItemChildId)

    let listData = await databaseZone.query(condition);

    let json = JSON.stringify(listData)

    let data2:CategoryLeftList[]= JSON.parse(json)

    this.categoryList=data2

    hilog.error(0x0000, 'testTag', `Failed to query data, code: ${this.categoryList}`);

  }

  这样只要id进行了修改，我们的数据查询就会执行

左侧列表ui逻辑

 @Builder

  LeftList() {

    List() {

      ForEach(this.categoryList, (item: SplitLayoutModel, index) => {

        ListItem() {

          Row() {

            Divider()

              .vertical(true)

              .color("#000000")

              .height(40)

              .width(3)

              .visibility(this.checkPosition == index ? Visibility.Visible : Visibility.None)

            Text(item.txt)

              .fontSize(12)

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

              .textAlign(TextAlign.Center)

              .width(75)

              .textOverflow({ overflow: TextOverflow.Ellipsis })

              .maxLines(1)

              .backgroundColor(this.checkPosition == index ? Color.White : "#f7f7f7")

              .fontColor(this.checkPosition == index ? "#000000" : "#999999")

          }

          .backgroundColor(this.checkPosition == index ? Color.White : "#f7f7f7")

          .height(60)

          .width(80)

          .onClick(() => {

            this.checkPosition = index

          })

        }

      })

    }

    .height('100%')

    .backgroundColor("#f7f7f7")

    .listDirection(Axis.Vertical) // 排列方向

    .divider({ strokeWidth: 0.5, color: "#e6e6e6" }) // 每行之间的分界线

    .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果

    .onScrollIndex((firstIndex: number, lastIndex: number) => {

      console.info('first' + firstIndex)

      console.info('last' + lastIndex)

    })

    .scrollBar(BarState.Off)

    .width(80)

  }

这样就实现了左侧列表的相关功能，我们点击其他类目对应的左侧列表数据也会发生相应的改变