uniapp小程序如何配置tabbar底部导航栏

在开发uniapp小程序时，底部导航栏（tabbar）是一个非常常见的功能需求。它可以帮助用户快速切换不同的页面，提升用户体验。本文将详细介绍如何在uniapp中配置tabbar底部导航栏，包括基本配置、自定义样式、动态切换、以及常见问题的解决方案。

1. 基本配置

1.1 创建页面

首先，我们需要创建几个页面，这些页面将作为tabbar的导航项。假设我们创建了以下四个页面：

• pages/index/index：首页
• pages/category/category：分类页
• pages/cart/cart：购物车页
• pages/user/user：用户中心页

1.2 配置pages.json

在uniapp中，pages.json文件用于配置页面的路由和窗口表现。我们需要在这个文件中配置tabbar。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "用户中心"
      }
    }
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "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/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png"
      }
    ]
  }
}

1.3 配置说明

• color：未选中时的文字颜色。
• selectedColor：选中时的文字颜色。
• backgroundColor：tabbar的背景颜色。
• borderStyle：tabbar上边框的颜色，可选值为black或white。
• list：tabbar的导航项列表，每个导航项包含以下属性：
  • pagePath：页面路径。
  • text：导航项的文字。
  • iconPath：未选中时的图标路径。
  • selectedIconPath：选中时的图标路径。

2. 自定义样式

2.1 修改tabbar高度

默认情况下，uniapp的tabbar高度为50px。如果需要修改tabbar的高度，可以通过以下方式实现：

{
  "tabBar": {
    "height": "60px",
    "list": [
      // 导航项配置
    ]
  }
}

2.2 修改tabbar图标大小

uniapp默认的tabbar图标大小为24px。如果需要修改图标大小，可以通过以下方式实现：

{
  "tabBar": {
    "iconWidth": "30px",
    "iconHeight": "30px",
    "list": [
      // 导航项配置
    ]
  }
}

2.3 自定义tabbar样式

如果需要更复杂的样式定制，可以通过在pages.json中配置custom属性来实现：

{
  "tabBar": {
    "custom": true,
    "list": [
      // 导航项配置
    ]
  }
}

然后在App.vue中编写自定义的tabbar组件：

<template>
  <view class="custom-tabbar">
    <view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(index)">
      <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="tabbar-icon"></image>
      <text :class="['tabbar-text', currentIndex === index ? 'active' : '']">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabbarList: [
        {
          pagePath: "/pages/index/index",
          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/user/user",
          text: "我的",
          iconPath: "/static/tabbar/user.png",
          selectedIconPath: "/static/tabbar/user-active.png"
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      uni.switchTab({
        url: this.tabbarList[index].pagePath
      });
    }
  }
};
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabbar-icon {
  width: 24px;
  height: 24px;
}

.tabbar-text {
  font-size: 12px;
  color: #999999;
}

.tabbar-text.active {
  color: #007AFF;
}
</style>

3. 动态切换tabbar

在某些场景下，我们可能需要动态切换tabbar的显示内容。例如，用户登录后显示不同的tabbar项。可以通过以下方式实现：

3.1 动态修改pages.json

uniapp不支持直接动态修改pages.json文件，但可以通过条件渲染来实现动态切换tabbar的效果。

<template>
  <view class="custom-tabbar">
    <view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(index)">
      <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="tabbar-icon"></image>
      <text :class="['tabbar-text', currentIndex === index ? 'active' : '']">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabbarList: []
    };
  },
  created() {
    this.updateTabbar();
  },
  methods: {
    updateTabbar() {
      const isLogin = uni.getStorageSync('isLogin');
      this.tabbarList = isLogin ? [
        {
          pagePath: "/pages/index/index",
          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/user/user",
          text: "我的",
          iconPath: "/static/tabbar/user.png",
          selectedIconPath: "/static/tabbar/user-active.png"
        }
      ] : [
        {
          pagePath: "/pages/index/index",
          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/user/user",
          text: "我的",
          iconPath: "/static/tabbar/user.png",
          selectedIconPath: "/static/tabbar/user-active.png"
        }
      ];
    },
    switchTab(index) {
      this.currentIndex = index;
      uni.switchTab({
        url: this.tabbarList[index].pagePath
      });
    }
  }
};
</script>

4. 常见问题及解决方案

4.1 tabbar不显示

如果tabbar没有显示，可能是以下原因导致的：

• pages.json中的tabBar配置有误。
• 页面路径配置错误。
• 页面没有正确引入。

4.2 tabbar图标不显示

如果tabbar图标没有显示，可能是以下原因导致的：

• 图标路径错误。
• 图标文件不存在。
• 图标格式不支持。

4.3 tabbar切换时页面不刷新

如果tabbar切换时页面没有刷新，可能是以下原因导致的：

• 页面缓存导致。
• 页面生命周期钩子没有正确触发。

可以通过在onShow生命周期钩子中处理页面刷新逻辑：

export default {
  onShow() {
    // 页面显示时刷新数据
  }
};

5. 总结

通过本文的介绍，你应该已经掌握了如何在uniapp小程序中配置tabbar底部导航栏。无论是基本配置、自定义样式，还是动态切换，uniapp都提供了灵活的解决方案。希望本文能帮助你在开发过程中更加得心应手。