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

一,将pages.json中的tabbar改为如下
即,只保留路径

"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"
      }
    ]
  }

二,在需要展示tabbar页面中添加

<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>

三,在vuex中添加tabbar的数组
原因:官方文档
      1,在页面根目录创建store文件,并在store文件中添加index.js

      2,main.js中添加

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();

      3,在index.js中添加

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;

三,接下来说明为什么不建议使用的问题
      1,如果在iconPath和selectedIconPath使用图片会导致底部导航栏在每个页面第一次加载时闪烁;
      2,相应的使用uniapp不会导致该问题,但那又那么匹配的图标呢

注:我也是刚学习uniapp,如果有解决闪烁问题的方法,还请不吝赐教