uniapp頂部選項卡

一、選項卡的基本功能

頂部選項卡是現代移動應用程序界面的必備組件之一，通常用於在不同功能之間進行導航。在uniapp中，通過uni-tab-bar和uni-tab-bar-item組件可以實現頂部選項卡的基本功能。

<uni-tab-bar>
    <uni-tab-bar-item icon="home">
        首頁
    </uni-tab-bar-item>
    <uni-tab-bar-item icon="cart">
        購物車
    </uni-tab-bar-item>
    <uni-tab-bar-item icon="contact">
        個人中心
    </uni-tab-bar-item>
</uni-tab-bar>

通過使用uni-tab-bar-item組件設置圖標和文本，可以輕鬆地創建頂部選項卡。用戶可以輕鬆地通過點擊不同的選項卡來導航到不同的頁面。

二、選項卡的樣式定製

雖然uniapp提供了基本的選項卡樣式，但有時我們需要自定義樣式以滿足我們的需求。

例如，我們可能希望更改選項卡的背景顏色，文本顏色和選擇狀態下的文本顏色。通過設置uni-tab-bar和uni-tab-bar-item的樣式屬性，我們可以輕鬆地自定義選項卡的外觀。

<uni-tab-bar border fixed @click="onClickTabBar">
  <uni-tab-bar-item v-for="(item, index) in items" :key="index" :selected="selectedIndex === index" :count="index === 1 ? count : ''" @click="onClickTabBarItem(index)">
    {{ item.text }}
  </uni-tab-bar-item>
</uni-tab-bar>

<style>
  .uni-tab-bar, .uni-tab-bar-item {
    background-color: #f5f5f5; /* 背景顏色 */
  }
  .uni-tab-bar-item__text {
    color: #333; /* 文本顏色 */
  }
  .uni-tab-bar-item--selected .uni-tab-bar-item__text {
    color: red; /* 選中狀態下的文本顏色 */
  }
</style>

在上面的代碼示例中，我們通過設置uni-tab-bar和uni-tab-bar-item的樣式屬性來自定義選項卡的背景顏色，文本顏色和選擇狀態下的文本顏色。我們可以使用CSS中的各種屬性來完全控制選項卡的外觀。

三、選項卡的動態切換

在實際開發中，我們通常需要根據用戶的操作來動態切換選項卡。例如，在用戶登錄後，我們可能需要將頂部選項卡中的個人中心切換到購物車。

在uniapp中，我們可以使用uni.$emit和uni.$on方法在不同的組件之間進行通信。

// FirstComponent.vue
<template>
  <uni-tab-bar fixed @click="onClick">
    <uni-tab-bar-item icon="home">
      首頁
    </uni-tab-bar-item>
    <uni-tab-bar-item icon="cart">
      {{ count }}
    </uni-tab-bar-item>
    <uni-tab-bar-item icon="contact">
      個人中心
    </uni-tab-bar-item>
  </uni-tab-bar>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    uni.$on('updateCount', (count) => {
      this.count = count
    })
  },
  methods: {
    onClick() {
      uni.$emit('clickTab', 'FirstComponent')
    }
  }
}
</script>

// SecondComponent.vue
<template>
  <uni-tab-bar fixed @click="onClick">
    <uni-tab-bar-item icon="home">
      首頁
    </uni-tab-bar-item>
    <uni-tab-bar-item icon="cart">
      {{ count }}
    </uni-tab-bar-item>
    <uni-tab-bar-item icon="contact">
      個人中心
    </uni-tab-bar-item>
  </uni-tab-bar>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    uni.$on('updateCount', (count) => {
      this.count = count
    })
    uni.$on('clickTab', (componentName) => {
      if (componentName === 'FirstComponent') {
        uni.setStorageSync('selectedTab', 0) // 切換到首頁
      }
    })
  },
  methods: {
    onClick() {
      uni.$emit('clickTab', 'SecondComponent')
    }
  }
}
</script>

在上面的代碼示例中，我們通過uni.$emit方法向所有組件廣播「clickTab」事件，並在控制器組件中設置uni.$on監聽方法以響應該事件。再通過uni.setStorageSync方法切換到不同的選項卡。

總結

uniapp頂部選項卡是現代應用程序界面設計的核心組件之一，可以在多個頁面之間提供非常方便的導航功能。使用uni-tab-bar和uni-tab-bar-item組件，我們可以輕鬆地構建和自定義選項卡的外觀和功能。通過uni.$emit和uni.$on方法，我們可以在不同的組件之間進行通信，實現選項卡的動態切換。在實際開發中，我們應根據需求靈活使用不同的選項卡功能和技術。