HarmonyOS开发商城商品详情-底部导航

目录

一：功能概述

二：代码实现

三：效果图

---

一：功能概述

上一节我们实现了商品详情页基础信息展示，这一节主要实现底部立即购买和加入购物车的功能。首先我们需要在底部创建两个按钮，这两个按钮固定字底部，不随页面滚动。点击添加购物车按钮，会出现一个对话框，显示商品的数量信息。点击确定调用接口，添加成功。

1：主要组件：

Button：按钮显示底部按钮，定义点击事件

CustomDialogController : 显示自定义弹窗。

二：代码实现

1:实现底部按钮

    Row() {

      Button('加入购物车', { type: ButtonType.Capsule, stateEffect: true  })
        .borderRadius(8)
        .backgroundColor('#DC143C')
        .margin({left:30})
        .width(90)
        .onClick(() => {
          this.dialogController.open()
        })

      Button('立即购买', { type: ButtonType.Capsule, stateEffect: true  })
        .borderRadius(8)