uniapp手机端自定义底部导航栏

1、找到pages.json文件设置如下图参数 2、写一个底部导航栏的公共组件tabbar.vue

<template>
  <u-tabbar :list="getList" bg-color="#fafafa" :active-color="appMainColor" :before-switch="beforeSwitch" @change="changeTabbar"></u-tabbar>
</template>

<script>
    import i18n from '@/lang'
    export default{
    props: {
      current: {
        type: Number,
        default: 0
      }
    },
    computed: {
      getList() {
        let tabbar = [
          {
            pagePath: "pages/index/index",
            iconPath: "/static/images/tabbar-home.png",
            selectedIconPath: "/static/images/tabbar-home-act.png",
            text: i18n.t('page.index')
          }, {
            pagePath: "pages/machine/index",
            iconPath: "/static/images/tabbar-machine.png",
            selectedIconPath: "/static/images/tabbar-machine-act.png",
            text: i18n.t('page.machine')
          }, {
            pagePath: "pages/order/index",
            iconPath: "/static/images/tabbar-order.png",
            selectedIconPath: "/static/images/tabbar-order-act.png",
            text: i18n.t('page.order')
          },{
            pagePath: "pages/user/index",
            iconPath: "/static/images/tabbar-user.png",
            selectedIconPath: "/static/images/tabbar-user-act.png",
            text: i18n.t('page.user')
          }
        ]
        let list = this.$dkm.permissionWhiteList();
        let newTabbar = [];
        for(let item of tabbar) {
          if(list.indexOf('/' + item.pagePath) > -1) {
            newTabbar.push(item);
          }
        }
        return newTabbar;
      }
    },
    methods: {
      beforeSwitch(index) {
        if(index === this.current) {
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

3、在需要使用底部导航页面引用tabbar组件

<template>
    <view>
        <Tabbar :current="0"/>
    </view>
</template>
<script>
    import Tabbar from '@/components/tabbar/tabbar'
    export default {
        components: { Tabbar }
    }
</script>