uniapp配置tabbar导航栏

Uniapp配置tabbar导航栏需要进行以下几个步骤：

1. 在pages.json文件中配置tabbar属性，例如：

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabbar/home.png",
      "selectedIconPath": "static/tabbar/home-active.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "static/tabbar/category.png",
      "selectedIconPath": "static/tabbar/category-active.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "static/tabbar/cart.png",
      "selectedIconPath": "static/tabbar/cart-active.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "static/tabbar/mine.png",
      "selectedIconPath": "static/tabbar/mine-active.png"
    }
  ]
}

2. 在app.vue文件中添加tabbar组件，例如：

<template>
  <div>
    <tabbar :list="tabList" :active="active"></tabbar>
    <router-view></router-view>
  </div>
</template>

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

export default {
  components: {
    tabbar
  },
  data() {
    return {
      tabList: [
        {
          text: '首页',
          iconPath: 'static/tabbar/home.png',
          activeIconPath: 'static/tabbar/home-active.png',
          path: '/pages/index/index'
        },
        {
          text: '分类',
          iconPath: 'static/tabbar/category.png',
          activeIconPath: 'static/tabbar/category-active.png',
          path: '/pages/category/category'
        },
        {
          text: '购物车',
          iconPath: 'static/tabbar/cart.png',
          activeIconPath: 'static/tabbar/cart-active.png',
          path: '/pages/cart/cart'
        },
        {
          text: '我的',
          iconPath: 'static/tabbar/mine.png',
          activeIconPath: 'static/tabbar/mine-active.png',
          path: '/pages/mine/mine'
        }
      ],
      active: 0
    }
  },
  onTabItemTap(item) {
    this.active = item.index
  }
}
</script>

3. 编写tabbar组件，例如：

<template>
  <div class="tabbar">
    <div class="tabbar-item" v-for="(item, index) in list" :key="index" @click="onTabbarClick(index)">
      <img :src="active === index ? item.activeIconPath : item.iconPath" alt="">
      <span :class="{active: active === index}">{{item.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    active: {
      type: Number,
      default: 0
    }
  },
  methods: {
    onTabbarClick(index) {
      if (index === this.active) {
        return
      }
      this.active = index
      wx.switchTab({
        url: this.list[index].path
      })
    }
  }
}
</script>

以上就是Uniapp配置tabbar导航栏的步骤，希望能对你有所帮助。