uniapp自定义tabBar

在uniapp中，可以通过uni-app自带的tabBar组件来实现底部导航栏的功能，也可以通过自定义组件来实现更加个性化的tabBar。

以下是实现自定义tabBar的步骤：

1.创建一个自定义tabBar组件，可以在pages文件夹下新建一个tabBar文件夹，然后在该文件夹下新建一个tabBar.vue文件。

2.在tabBar.vue中，可以使用uni-app提供的tabBar组件作为容器，然后在其中自定义需要的tabBar样式和内容。

<template>
  <view class="custom-tab-bar">
    <view class="tab-item" :class="{active:activeIndex===0}" @click="handleClick(0)">
      <text class="iconfont icon-home"></text>
      <text class="title">首页</text>
    </view>
    <view class="tab-item" :class="{active:activeIndex===1}" @click="handleClick(1)">
      <text class="iconfont icon-form"></text>
      <text class="title">表单</text>
    </view>
    <view class="tab-item" :class="{active:activeIndex===2}" @click="handleClick(2)">
      <text class="iconfont icon-user"></text>
      <text class="title">我的</text>
    </view>
  </view>
</template>

3.在tabBar.vue中，可以使用props来接收父组件传递过来的参数，并且可以使用$emit来向父组件发送事件。

<script>
  export default {
    props: {
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    methods: {
      handleClick(index) {
        this.$emit('changeTab', index)
      }
    }
  }
</script>

4.在父组件中，可以使用自定义tabBar组件，并且通过props来传递参数和监听事件。

<template>
  <view>
    <view class="content">
      <router-view></router-view>
    </view>
    <custom-tab-bar :activeIndex="activeIndex" @changeTab="handleChangeTab"></custom-tab-bar>
  </view>
</template>

<script>
  import CustomTabBar from '@/components/tabBar/tabBar.vue'
  export default {
    components: {
      CustomTabBar
    },
    data() {
      return {
        activeIndex: 0
      }
    },
    methods: {
      handleChangeTab(index) {
        this.activeIndex = index
      }
    }
  }
</script>

5.在App.vue中，可以通过设置tabBar的custom属性来使用自定义tabBar组件。

<template>
  <view>
    <custom-tab-bar :activeIndex="activeIndex" @changeTab="handleChangeTab"></custom-tab-bar>
    <router-view></router-view>
  </view>
</template>

<script>
  import CustomTabBar from '@/components/tabBar/tabBar.vue'
  export default {
    components: {
      CustomTabBar
    },
    data() {
      return {
        activeIndex: 0
      }
    },
    methods: {
      handleChangeTab(index) {
        this.activeIndex = index
      }
    },
    tabBar: {
      custom: true,
      color: '#7A7E83',
      selectedColor: '#007AFF',
      backgroundColor: '#ffffff',
      list: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/tabBar/home.png',
          selectedIconPath: '/static/tabBar/home-active.png'
        },
        {
          pagePath: '/pages/form/form',
          text: '表单',
          iconPath: '/static/tabBar/form.png',
          selectedIconPath: '/static/tabBar/form-active.png'
        },
        {
          pagePath: '/pages/user/user',
          text: '我的',
          iconPath: '/static/tabBar/user.png',
          selectedIconPath: '/static/tabBar/user-active.png'
        }
      ]
    }
  }
</script>

以上就是实现自定义tabBar的步骤，可以根据自己的需求修改tabBar样式和内容。