uniapp 开发小程序如何实现高性能的自定义底部导航栏，点击底部导航栏菜单以后如何却换页面内容

要实现高性能的自定义底部导航栏，可以使用uni-app提供的tabBar组件。tabBar组件可以自定义样式，并且支持通过点击切换页面内容。以下是使用tabBar组件实现自定义底部导航栏的步骤：

1. 在pages.json文件中配置tabBar。

"tabBar": {
    "color": "#999",
    "selectedColor": "#007aff",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "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>
  <view>
    <tab-bar></tab-bar>
    <router-view></router-view>
  </view>
</template>

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

export default {
  components: {
    TabBar
  },
  tabBar: {
    color: '#999',
    selectedColor: '#007aff',
    backgroundColor: '#fff',
    borderStyle: 'black'
  }
}
</script>

3. 在tab-bar组件中实现点击切换页面的功能。

<template>
  <view class="tab-bar">
    <view class="tab-item" v-for="(item, index) in list" :key="index" @click="switchTab(index)">
      <image :src="item.selected ? item.selectedIconPath : item.iconPath"></image>
      <text class="tab-title" :class="{active: item.selected}">{{item.text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    switchTab(index) {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const url = '/' + currentPage.route
      if (index !== this.list.findIndex(item => item.pagePath === url)) {
        uni.switchTab({
          url: '/' + this.list[index].pagePath
        })
      }
    }
  }
}
</script>

通过以上步骤，就可以实现一个高性能的自定义底部导航栏，并且支持点击切换页面内容。