uni-app自定义底部切换栏tabBar

 

引用：

import uiTabBar from '@/components/ui-tab-bar/ui-tab-bar.vue'

components: {
              uiTabBar
        }

listData: [{
                        name: '工作',
                        url: '../index/index',
                        image: '/static/image/gz_s.png',
                        active: true,
                    },
                    {
                        name: '功能',
                        url: '../function/function',
                        image: '/static/image/work.png',
                        active: false,
                    },
                    {
                        name: '通讯录',
                        url: '../book/book',
                        image: '/static/image/book.png',
                        active: false,
                    }, {
                        name: '我的',
                        url: '../myhome/myhome',
                        image: '/static/image/myhome.png',
                        active: false,
                    }
                ],

页面： 

 

效果：