uniapp 小程序底部tabbar选中时只显示图标不显示文字怎么实现

UniApp小程序中的底部TabBar设置成选中时只显示图标不显示文字，可以通过自定义组件和配置选项来实现。以下是基本步骤：

1. **创建自定义TabBarIcon组件**：
首先，在项目的components文件夹下创建一个新的文件夹，例如`custom-tabbar`，然后在其中创建一个名为`CustomTabBarItem.vue`的文件，内容大致如下：

<template>
  <view :class="{ selected: index === $route.meta.tabIndex }">
    <image v-if="showText" :src="iconUrl" :class="selected && 'selected'" />
    <text v-else>{{ iconLabel }}</text>
  </view>
</template>

<script>
export default {
  name: 'CustomTabBarItem',
  props: {
    index: Number,
    iconUrl: String,
    iconLabel: String,
    selectedColor: String,
    normalColor: String
  },
  computed: {
    showText() {
      return this.$route.meta.showLabel ? true : false;
    }
  },
  methods: {
    onTabClick(e) {
      // 根据需要添加点击事件处理
    }
  }
}
</script>

<style scoped>
.selected {
  color: {{ selectedColor || '#000' }};
}
.normal {
  color: {{ normalColor || '#666' }};
}
</style>

2. **在App.json中配置底部TabBar**：
在`App.json`中，将默认的TabBar替换为你新创建的自定义组件，并设置`show-label`属性来控制是否显示文字：

{
  "pages": ["index/index"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "uni-app",
    "navigationBarTextStyle": "black",
    "tabBar": {
      "color": "#666",
      "borderStyle": "#ddd",
      "list": [
        {
          "pagePath": "index/index",
          "text": "",
          "iconPath": "@/custom-tabbar/icon1.png",
          "selectedIconPath": "@/custom-tabbar/icon1_selected.png",
          "showLabel": false
        }, ...其他配置项...
      ]
    }
  }
}

这里的`showLabel`属性设为`false`表示不显示文字。

3. **更新图标和文字样式**：
在自定义组件中，你可以根据`$route.meta.tabIndex`判断当前选中状态，改变文本颜色、图标路径等。