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)