《仿盒马》app开发技术分享-- 分类左侧列表(17)

举报
yd_215151764 发表于 2025/06/30 10:24:58 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果## 功能分析1.列表展示列表的数据展示,我们要根据当前选中的顶部列表child_id作为前提条件进行数据的查询,因为我们的顶部列表是一个大的...


## 技术栈

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)
  }
这样就实现了左侧列表的相关功能,我们点击其他类目对应的左侧列表数据也会发生相应的改变
                     

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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