uni-app 自定义 tab 选项卡 2 - 潇洒哥gg

在 uni-app 中自定义 tab 选项卡是一项常见的需求，通常可以通过在页面的 tabBar 配置中自定义图标、文字等属性来实现。不过，如果你需要更复杂的自定义效果（比如动态加载 tab 项、自定义布局等），则需要结合组件和样式来实现。以下是一个简单的示例，展示如何在 uni-app 中实现自定义 tab 选项卡。

首先，确保你的项目根目录下的 pages.json 文件中已经配置了基本的 tabBar 信息：

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      // 其他 tab 项配置...
    ]
  }
}

然而，上述配置仅支持基本的 tabBar 样式。为了实现更复杂的自定义效果，你可以考虑使用自定义组件和条件渲染来模拟 tabBar。以下是一个示例代码，展示如何在页面中实现自定义 tabBar：

1. 创建自定义 tabBar 组件 (components/CustomTabBar.vue):

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

<script>
export default {
  props: ['current'],
  data() {
    return {
      tabs: [
        { text: '首页', iconPath: '/static/tabbar/home.png' },
        // 其他 tab 项配置...
      ],
      currentIndex: 0
    };
  },
  watch: {
    current(newVal) {
      this.currentIndex = this.tabs.findIndex(tab => tab.text === newVal);
    }
  },
  methods: {
    switchTab(index) {
      const tabText = this.tabs[index].text;
      this.$emit('update:current', tabText);
      uni.switchTab({ url: `/pages/${tabText.toLowerCase()}/${tabText.toLowerCase()}.vue` });
    }
  }
};
</script>

<style scoped>
/* 样式定义 */
</style>

1. 在页面中使用自定义 tabBar 组件 (pages/index/index.vue):

<template>
  <view>
    <CustomTabBar :current.sync="currentPage"></CustomTabBar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue';

export default {
  components: { CustomTabBar },
  data() {
    return {
      currentPage: '首页'
    };
  }
};
</script>

通过上述代码，你可以实现一个基本的自定义 tabBar，其中包含了图标、文字和点击事件处理。你可以根据需要进一步扩展和美化这个组件。