《仿盒马》app开发技术分享-- 兑换订单列表框架(75)

举报
yd_215151764 发表于 2025/06/30 10:50:33 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。## 功能分析兑换商品的订单列表框架我们选择使用tabs,实现一个页面可以进行切换。这样我们一个页面中可以展示许多状态的订单。## 代码实现我们先实现一个整体框架,定义需要的参...


## 技术栈

Appgallery connect

## 开发准备
上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架,框架的搭建我们在其他页面也进行了多次的搭建,采用左右切换的页面展示形式即可,这里我们使用tabs组件进行展示

## 功能分析
要实现兑换商品的订单列表框架我们选择使用tabs,tabs的组件我们可以实现自定义的tabar,创建自定义的bar我们可以根据index来实时的切换数据的颜色和字体大小,可以的话我们还可以添加一些个性的样式,我门通过页面切换。这样我们一个页面中可以展示许多状态的订单。

## 代码实现
我们先实现一个整体框架,定义需要的参数,在这里我们定义不同的变量,分别定义当前选中的下标,字体的颜色,选中时字体的颜色,tabs的控制器

```css
 @State currentIndex: number = 0
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State selectedIndex: number = 0;
  private controller: TabsController = new TabsController();
```
自定义的tabar布局,我们采用经典的tabbar布局,上方一个说明文字,下方一个标志线,我们在opacity方法中根据selectedIndex字段来控制下划线的显示和隐藏。

```css
@Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .width(40)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width('100%')
  }
```
tabs,在切换的时候把下标赋予给定义的变量,这样在后续我们创建的自定义组建中把下标传进去,控制状态、颜色的切换,传入当前tabs选中的下标,传递给tabcontent中加载的自定义组件,同时我们还需要定义一个变量,用来触发tabcontent组件中重新加载方法,我们只需要在自定义组件中使用@watch就可以实现切换后每次都刷新组件

```css
    Column() {
      CommonTopBar({ title: "兑换订单", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(0, '待发货'))

        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(1, '已取消'))

        TabContent() {
          Column(){

          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(2, '待收货'))

        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(3, '已完成'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth('100%')
      .barHeight(56)
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return;
        }
        this.selectedIndex = targetIndex;
      })
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
    }.width('100%')

```
到这里我们就完成了兑换订单列表的框架


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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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