如何为uniapp应用自定义tabbar - 快速配置教程

一、选用tabbar组件

在为uniapp应用自定义tabbar之前，我们需要先选用一个tabbar组件。uniapp官方提供的uni-tabbar比较简单，只有部分样式可配置，因此我们可以使用其他tabbar组件，比如color-ui等第三方组件。

在使用第三方组件时，我们需要在App.vue中引入组件并设置全局样式，具体代码如下：

// 引入组件
import uniTabbar from "@/components/uni-tabbar/uni-tabbar.vue"

export default {
  globalData: {},
  components: {
    uniTabbar // 注册组件
  },
  // 设置样式
  onShow() {
    uni.setTabBarStyle({
      color: "#BFBFBF",
      selectedColor: "#0D84FF",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [{
          pagePath: "/pages/home/home",
          text: "首页",
          iconPath: "/static/tabbar/home.png",
          selectedIconPath: "/static/tabbar/home-active.png"
        },
        {
          pagePath: "/pages/personal/personal",
          text: "个人中心",
          iconPath: "/static/tabbar/personal.png",
          selectedIconPath: "/static/tabbar/personal-active.png"
        }
      ]
    });
  },
};

二、创建自定义tabbar组件

通过uniapp基础组件提供的基础功能，我们可以对组件进行扩展，实现自定义tabbar。具体代码如下：

   

<script>
export default {
  data() {
    return {
      activeIndex: 0 // 当前选中的tab
    }
  },
  methods: {
    // 切换tab
    switchTab(index) {
      this.activeIndex = index
      uni.switchTab({
        url: this.$refs.tabBar.list[index].pagePath
      })
    }
  }
}
</script>

在创建自定义tabbar组件时，我们需要注意一下每个tab的样式、切换方法和跳转路径等。

三、在页面使用自定义tabbar组件

当我们创建好自定义tabbar组件后，就可以在需要使用的页面中引入并使用了。具体代码如下：

   

<script>
export default {

}
</script>

通过引入自定义tabbar组件，在页面中即可使用。

四、总结

通过以上三个步骤，我们就可以为uniapp应用自定义tabbar了。具体地，我们可以选用第三方tabbar组件，自定义tabbar组件并在需要使用的页面中引入即可。