uniapp tabBar换到顶上

为了将uniapp的tabBar换到顶部，我们需要进行以下步骤：

1.在App.vue中添加以下代码：

<template>
  <div>
    <tab-bar></tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import tabBar from '@/components/tabBar.vue'

export default {
  components: {
    tabBar
  }
}
</script>

2.在tabBar.vue中添加以下代码：

<template>
  <div class="tab-bar">
    <div class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
      <img :src="item.iconPath" :class="activeIndex === index ? 'active' : ''">
      <p :class="activeIndex === index ? 'active' : ''">{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabList: [
        {
          iconPath: '/static/tabBar/home.png',
          selectedIconPath: '/static/tabBar/home-active.png',
          text: '首页',
          pagePath: '/pages/index/index'
        },
        {
          iconPath: '/static/tabBar/mine.png',
          selectedIconPath: '/static/tabBar/mine-active.png',
          text: '我的',
          pagePath: '/pages/mine/mine'
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index
      uni.switchTab({
        url: this.tabList[index].pagePath
      })
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}

.tab-bar-item img {
  width: 40px;
  height: 40px;}

.tab-bar-item p {
  font-size: 24px;
  margin-top: 10px;
}

.tab-bar-item img.active {
  width: 50px;
  height: 50px;
}

.tab-bar-item p.active {
  color: #007aff;
}
</style>

3.在pages.json中添加以下代码：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "核心圈",
    "navigationBarBackgroundColor": "#009cfd",
    "backgroundColor": "#ff12e9"
  },
  "tabBar": {
    "position": "top",
    "color": "#7A7E83",
    "selectedColor": "#007aff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabBar/home.png",
        "selectedIconPath": "static/tabBar/home-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabBar/mine.png",
        "selectedIconPath": "static/tabBar/mine-active.png"
      }
    ]
  }
}