回到购物车页面 .. 去掉文件顶部导入的 Taro UI 组件 .. 因为暂时在这个页面上用不到 Taro UI 组件 .. 下面我要在购物车页面上添加一个标签栏 .. 这个标签栏可以复制一下之前创建的 ProductPageTabBar 组件 ..

修改一下目录的名字 .. cart-page-tab-bar ..

打开组件文件 ..

再修改一下组件的名字 .. CartPageTabBar ... 底部默认导出的也是这个 CartPageTabBar ..

回到购物车页面 .. 在文件顶部导入刚才创建的 CartPageTabBar 组件 .. 位置是一级目录的上一级目录 .. components 下面的 cart-page-tab-bar ..

在这个页面视图里，用一下 CartPageTabBar 组件 .. 使用它的时候可以提供一些属性给它 .. 暂时先添加一个 primary .. 设置一下标签栏上的主按钮的文字 .. 提交订单 ..

再添加一个 disabled .. 判断的条件是检查 seletecItems 的 length 是不是等于 0 .. 如果是就禁用主按钮 ..

然后添加一个 disabledText 设置一下主按钮在禁用状态下显示的文字 .. 请先选择 ..

现在购物车页面的底部会显示一个标签栏 .. 上面有一个主按钮 .. 目前它是禁用的状态 .. 选择一个购物车项目 .. 按钮又会变成正常状态 .. 注意禁用状态跟正常状态下，按钮的文字是不一样的 ..

因为这个标签栏是固定位置 .. 所以它会挡住页面上的一块内容 .. 可以在这个 View 上面 .. 添加点下边的边距 .. 添加一个 pb-5 ..

这样页面的底部会留出足够的空间 ..