《仿盒马》app开发技术分享-- 分类右侧商品列表(18)

举报
yd_215151764 发表于 2025/06/30 10:25:24 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果## 功能分析**1.列表展示**当我们选择顶部一级分类列表时,左侧列表展示二级分类列表,右侧商品列表展示二级分类列表下的同品类商品,这时候我们需要很好的控制它们之间的联动效果,保证我们每次...


## 技术栈

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)
  }
  
  我们点击其他类目左侧跟右侧的数据同时都刷新了,到这里我们的功能就实现了

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。