uniapp自定义底部菜单栏

以下是uni-app自定义底部菜单栏的步骤：

1.下载uni-app-bottom-navigation-master.zip并解压缩。

2.将解压后的文件夹复制到你的uni-app项目的static目录下。

3.在pages.json文件中添加如下代码：

"tabBar": {
  "custom": true,
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/uni-app-bottom-navigation-master/static/home.png",
      "selectedIconPath": "/static/uni-app-bottom-navigation-master/static/home_selected.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "/static/uni-app-bottom-navigation-master/static/logs.png",
      "selectedIconPath": "/static/uni-app-bottom-navigation-master/static/logs_selected.png"
    },
    {
      "pagePath": "pages/user/user",
      "text": "我的",
      "iconPath": "/static/uni-app-bottom-navigation-master/static/user.png",
      "selectedIconPath": "/static/uni-app-bottom-navigation-master/static/user_selected.png"
    }
  ]
}

4.在App.vue文件中添加如下代码：

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

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

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

5.在components目录下创建tab-bar.vue文件，并添加如下代码：

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

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentPath: ''
    }
  },
  created() {
    this.currentPath = this.$mp.page.route
  },
  methods: {
    switchTab(path) {
      if (path !== this.currentPath) {
        uni.switchTab({
          url: '/' + path
        })
      }
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
  color: #7A7E83;
}

.tab-bar-item.active {
  color: #3cc51f;
}

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

.tab-bar-item p {
  font-size: 12px;
  margin-top: 4px;
}
</style>

以上就是uni-app自定义底部菜单栏的步骤。