uniapp自定义tabbar

1.创建tabbar

"tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "",
          "selectedIconPath": ""
        }, {
          "pagePath": "pages/message/message",
          "text": "消息",
          "iconPath": "",
          "selectedIconPath": ""
        }, {
          "pagePath": "pages/forum/forum",
          "text": "论坛",
          "iconPath": "",
          "selectedIconPath": ""
        }, {
          "pagePath": "pages/my/my",
          "text": "我的",
          "iconPath": "",
          "selectedIconPath": ""
        }]
      }

2.常见tabbar组件（我这里用来u-view）

<template>
    <view>
        <u-tabbar
            :value="currentPage"
            @change="NavChange"
            :fixed="true"
            :placeholder="true"
            :safeAreaInsetBottom="true"
        >
            <u-tabbar-item text="首页" icon="home" name="index"></u-tabbar-item>
            <u-tabbar-item text="消息" icon="email" name="message"></u-tabbar-item>
            <u-tabbar-item text="论坛" icon="chat" name="forum"></u-tabbar-item>
            <u-tabbar-item text="我的" icon="account" name="my"></u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
    export default{
        name: "tabbar",
        props:{
            currentPage:{
                type:String,
                default:'index'
            }
        },
        data() {
            return {}
        },
        created() {
            uni.hideTabBar()
        },
        methods: {
            NavChange: function(e) {
                uni.switchTab({
                  url: `/pages/${e}/${e}`,
                })
            }
        }
    }
</script>

<style>
</style>

3.使用tabbar组件

image.png

4.隐藏原生tabbar

image.png

优点就是自定义可以非常的强，缺点是首次点击会闪一下，性能会比原生差