uniapp自定义底部导航栏(非必要不建议使用)

    "tabBar": {
    "color": "#333",
    "selectedColor": "#EB3477",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/find/find"
      },
      {
        "pagePath": "pages/discount/discount"
      },
      {
        "pagePath": "pages/about/about"
      }
    ]
      }

    <template>
      <div class="container">
    <u-tabbar :list="tabbar" :mid-button="false" active-color="#EB3477"></u-tabbar>
      </div>
    </template>
    <script>
    export default {
      data() {
    return {
      tabbar: this.$store.state.tabbar,
    };
      },
    };
    </script>
    <style lang="scss" scoped>
    @import "uview-ui/index.scss";
    
    </style>

    import Vue from "vue";
    import App from "./App";
    import "@/static/iconfont/iconfont.css";
    import uView from "uview-ui";
    Vue.use(uView);
    
    import store from "./store";
    Vue.prototype.$store = store;
    Vue.config.productionTip = false;
    
    App.mpType = "app";
    
    const app = new Vue({
      ...App,
      store,
    });
    app.$mount();

    import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    const store = new Vuex.Store({
      state: {
    tabbar: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "home",
        selectedIconPath: "home-fill",
      },
      {
        pagePath: "/pages/find/find",
        text: "发现",
        iconPath: "file-text",
        selectedIconPath: "file-text-fill",
      },
      {
        pagePath: "/pages/discount/discount",
        text: "优惠购",
        iconPath: "grid",
        selectedIconPath: "grid-fill",
      },
      {
        pagePath: "/pages/about/about",
        text: "关于",
        iconPath: "/static/image/about.png",
        selectedIconPath: "/static/image/about_s.png",
      },
    ],
      },
      getters: {},
      mutations: {},
      actions: {},
    });
    
    export default store;