## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了分类页左侧二级分类列表功能，并实现了顶部列表&弹窗跟左侧列表的联动，这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果

## 功能分析

**1.列表展示**

当我们选择顶部一级分类列表时，左侧列表展示二级分类列表，右侧商品列表展示二级分类列表下的同品类商品，这时候我们需要很好的控制它们之间的联动效果，保证我们每次的切换，对应的列表都能够正常的刷新，同时也要注意数据之间的对应关系，及时的修改对应的id来帮助我们实现数据的查询。

## 代码实现

首先我们来实现右侧列表的展示

因为我们是用左侧列表的right_id字段来进行查询的所以，需要在左侧list的item点击事件中先把值传给我们定义的变量，同时监听这个变量，当它修改的时候我们及时触发列表刷新

  @State @Watch("onIdChange") rightItemId:number=0

.onClick(() => {

            this.checkPosition = index

            this.rightItemId=item.right_id

          })

然后我们在监听方法中实现数据查询

 async onIdChange(){

    this.productListItem.length=0;

    let condition = new cloudDatabase.DatabaseQuery(category_product_list);

    condition.equalTo("right_id",this.rightItemId)

    let listData = await databaseZone.query(condition);

    let json = JSON.stringify(listData)

    let data1:CategoryProductList[]= JSON.parse(json)

    this.productListItem=data1

    hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${this.productListItem}`);

  }

数据查询出来之后进行数据填充

@Builder

  buildList() {

    List() {

      ForEach(this.productListItem, (item: CategoryProductList) => {

        ListItem() {

          this.ProductItem(item)

        }

      })

    }

    .height('100%')

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

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

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

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

      console.info('first' + firstIndex)

      console.info('last' + lastIndex)

    })

  }

item样式

@Builder ProductItem(item: CategoryProductList) {

    Flex({ direction: FlexDirection.Row }) {

      Image(item.url)

        .margin({ top: 5, left: 8, right: 8 })

        .objectFit(ImageFit.Contain)

        .height(80)

        .width(80)

        .borderRadius(10)

        .objectFit(ImageFit.Cover)

      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {

        Text(item.name)

          .fontSize(16)

          .fontWeight(FontWeight.Bold)

          .margin({ top: 8 })

          .fontColor("#333333")

        Text(item.text_message)

          .fontColor("#999999")

          .fontSize(12)

          .margin({top:10})

        Row() {

          Text() {

            Span('¥')

              .fontSize(12)

              .fontWeight(FontWeight.Bold)

              .fontColor(Color.Red)

            Span(item.price.toString())

              .fontSize(18)

              .fontWeight(FontWeight.Bold)

              .fontColor(Color.Red)

          }

          .margin({ top: 25 })

        }

      }

    }

    .margin({ top: 10 })

    .onClick(() => {

    })

  }

之后我们因为在左侧list中可能会点击不同的条目。我们想要的效果是顶部的类目切换，左侧的列表优先选中第一个，同时展示第一个分类的对应商品

所以在监听方法中我们还要把pos初始化为0，同时重新查询左侧列表，因为在左侧列表中我们修改了监听的id，所以会自动触发右侧列表的刷新

async onChange(){

    this.checkPosition=0

    this.categoryList.length=0

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

    this.queryLeftList(data2[0].child_id)

  }

  我们点击其他类目左侧跟右侧的数据同时都刷新了，到这里我们的功能就实现了