uniapp 微信小程序底部购物车

### 实现 UniApp 微信小程序底部购物车功能

为了在 UniApp 中开发带有底部购物车的微信小程序，可以采用自定义 `tabBar` 的方式来创建一个更加灵活且美观的底部导航栏。通过这种方式能够更好地控制各个 Tab 项的行为以及样式。

#### 创建项目结构并配置页面路由

首先，在项目的根目录下新建用于展示商品列表、个人中心等不同场景下的多个页面，并确保这些页面已经在 `pages.json` 文件内被正确定义为 tabBar 页面之一[^1]：

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "首页"
    }
},
...
{
    "path": "pages/cart/cart", // 购物车主页路径
    "style": {
        "navigationBarTitleText": "购物车"
    }
}

接着设置整个应用级别的 `tabBar` 配置选项，同样位于 `pages.json` 文件中:

"tabBar": {
    "list": [
      ...
      {
          "pagePath": "pages/cart/cart",
          "text": "购物车",
          "iconPath": "./static/images/tabbar/cart.png",
          "selectedIconPath": "./static/images/tabbar/cart-active.png"
      },
      ...
    ]
}

#### 构建自定义 tabBar 组件

由于默认情况下无法满足特殊需求（比如中间按钮凸起），因此推荐构建一个完全由自己掌控的 tabBar 组件。此组件应支持动态更新图标状态等功能特性。

- **HTML 结构**

在此处引入 `<cover-view>` 和其他必要的标签以适应小游戏场景的要求；同时利用条件渲染机制处理选中的 tab 样式变化等问题:

<template>
  <!-- 自定义 tabBar -->
  <view class="custom-tab-bar">
    <block v-for="(item, index) in list" :key="index">
      <view @click="switchTab(item.pagePath)" :class="[currentIndex === index ? 'active' : '', 'tab-item']">
        <image mode="aspectFit" :src="currentIndex !== 2 && currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
        <text>{{ item.text }}</text>
      </view>
    </block>

    <!-- 特殊处理中间位置的商品加入购物车按钮 -->
    <button open-type="share" hover-class="none" bindtap="addGoodsToCart" style="position:absolute;left:50%;transform:translateX(-50%);bottom:.8rem;">
      <image src="/static/icon/add-to-cart.png"/>
    </button>
  </view>
</template>

- **CSS 样式调整**

针对上述 HTML 定制相应的 CSS 来美化界面布局，特别是对于那个突出显示的加购按钮部分需要特别注意其定位属性的设定:

.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 98rpx;
  background-color: white;
}

.tab-item {
  width: 20%;
  text-align: center;
}

.tab-item image {
  width: 40rpx;
  height: 40rpx;
}

.tab-item.active {
  color: red !important; /* 当前激活时的文字颜色 */
}

/* 加入购物车按钮样式 */
button::after { border:none;} 

button {
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  font-size:inherit ;
  box-shadow: none;
  outline-style: none;
  appearance: unset;
  background-color:#ff7e0f ; 
  border-radius: 50%;
  width: 96rpx;
  height: 96rpx;
}

button image {
  width: 48rpx;
  height: 48rpx;
}

- **JavaScript 行为逻辑**

最后编写 JavaScript 方法用来监听用户的交互操作，例如点击某个 tab 或者执行添加到购物车的动作。这里需要注意的是当用户首次访问某一页签时可能会遇到短暂延迟现象，这属于正常情况因为涉及到资源加载过程:

export default {
  data() {
    return {
      list: [{
          pagePath: "/pages/home/home",
          iconPath: "/static/images/tabbar/home.png",
          selectedIconPath: "/static/images/tabbar/home-active.png",
          text: "首页"
        }, {
          pagePath: "/pages/category/category",
          iconPath: "/static/images/tabbar/category.png",
          selectedIconPath: "/static/images/tabbar/category-active.png",
          text: "分类"
        }, {},// 占位符，对应中间的悬浮按钮
        {
          pagePath: "/pages/cart/cart",
          iconPath: "/static/images/tabbar/cart.png",
          selectedIconPath: "/static/images/tabbar/cart-active.png",
          text: "购物车"
        }, {
          pagePath: "/pages/user/user",
          iconPath: "/static/images/tabbar/mine.png",
          selectedIconPath: "/static/images/tabbar/mine-active.png",
          text: "我的"
        }],
      currentIndex: 0,
    };
  },

  methods: {
    switchTab(url) {
      uni.switchTab({
        url: url
      });
    },

    addGoodsToCart(e){
       console.log('Add goods to cart');
    }
  }
};