uniapp小程序如何配置tabbar底部導航欄

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都提供了靈活的解決方案。希望本文能幫助你在開發過程中更加得心應手。