uniapp封装自适应底部导航栏

您可以使用uniapp的自定义导航栏组件来实现自适应底部导航栏。以下是一个简单的示例代码：

1. 创建一个名为`CustomTabBar`的自定义组件：

<template>
  <view class="custom-tab-bar">
    <view v-for="(item, index) in tabList" :key="index" class="tab-item" @click="switchTab(index)">
      <image :src="selectedTab === index ? item.selectedIcon : item.icon" class="tab-icon"></image>
      <text :class="selectedTab === index ? 'active' : ''">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    selectedTab: {
      type: Number,
      default: 0
    }
  },
  methods: {
    switchTab(index) {
      this.$emit('switchTab', index);
    }
  }
}
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #F5F5F5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

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

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

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

2. 在页面中使用自定义导航栏组件：

<template>
  <view>
    <!-- 页面内容 -->
    <view class="content">
      <!-- 页面内容 -->
    </view>
    
    <!-- 自定义底部导航栏 -->
    <custom-tab-bar :tabList="tabList" :selectedTab="selectedTab" @switchTab="switchTab"></custom-tab-bar>
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'; // 导入自定义导航栏组件

export default {
  components: {
    CustomTabBar
  },
  data() {
    return {
      tabList: [
        { text: '首页', icon: '/static/tabbar/home.png', selectedIcon: '/static/tabbar/home-active.png' },
        { text: '分类', icon: '/static/tabbar/category.png', selectedIcon: '/static/tabbar/category-active.png' },
        { text: '我的', icon: '/static/tabbar/mine.png', selectedIcon: '/static/tabbar/mine-active.png' }
      ],
      selectedTab: 0
    };
  },
  methods: {
    switchTab(index) {
      this.selectedTab = index;
    }
  }
}
</script>

此示例代码中，`CustomTabBar`组件用于展示底部导航栏，通过传递`tabList`和`selectedTab`属性来渲染导航栏的选项卡和当前选中的选项卡。点击选项卡时，触发`switchTab`事件来更新选中的选项卡。

您可以根据自己的需求修改样式和图标路径，以实现您想要的自适应底部导航栏效果。希望对您有帮助！