uni-app如何用uView自定义底部导航

uView框架 https://www.uviewui.com/components/tabbar.html
首先 需要使用自定义底部导航的页面里添加组件名
这个valueModel是你点击的是哪个底部导航，为了高亮并且传给自定义底部导航组件

然后是底部导航的组件

直接代码全复制,我的数据时从vuex里读取的，具体可以看情况获取

<template>
    <u-tabbar :value="valueModel" :fixed="true" @change="changeRouter" :placeholder="true" z-index='9999'
        :safeAreaInsetBottom="true">
        <u-tabbar-item :badge="index==0?'3':null" :text="item.text" :icon="item.iconPath"
            v-for="(item,index) in vuex_tabbar" :key='index'></u-tabbar-item>
    </u-tabbar>
</template>

<script>
    import {
        mapState
    } from 'vuex' //引入mapGetters
    export default {
        name: "u-tabbar-own",
        data() {
            return {};
        },
        props: {
            valueModel: {
                type: Number,
                default: 0
            }
        },
        created() {
            // 是否隐藏原生tabbar
            uni.hideTabBar();
        },
        mounted() {


        },
        computed: {
            ...mapState({
                vuex_tabbar: state => state.vuex_tabbar,
            })
        },
        methods: {
            changeRouter(e) {

                if (e == 0) {
                    if (this.$store.state.vuex_tabbar[0].text == '待办') {
                        uni.switchTab({
                            url: `/pages/backlog/backlog`
                        });
                    } else {
                        uni.setTabBarItem({
                          index: 0,
                          text: "",
                          selectedIconPath: '/pages/fieldStatistics/fieldStatistics'
                        })
                        uni.switchTab({
                            url: `/pages/fieldStatistics/fieldStatistics`
                        });
                    }

                } else if (e == 1) {
                    uni.switchTab({
                        url: `/pages/client/client`
                    });
                } else if (e == 2) {
                    uni.switchTab({
                        url: `/pages/workbench/workbench`
                    });
                } else if (e == 3) {
                    uni.switchTab({
                        url: `/pages/resource/resource`
                    });
                } else if (e == 4) {
                    uni.switchTab({
                        url: `/pages/my/my`
                    });
                }

            },
        }
    }
</script>

<style lang="scss" scoped>
    .f-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
</style>