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

<template>
	<view class="footer-bar">
		<view class="bar-list">
			<view class="bar-item" :class="item.active?'bar-item-active':''" v-for="(item,index) in listData" :key="index" @click="tabClick(item.url)">
				<image :src="item.image" class="item-icon"></image>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			listData:{
				type:Array,
				value:[]
			}
		},
		methods:{
			tabClick: function(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.footer-bar {
		.bar-list {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background:rgba(255,255,255,1);
			box-shadow:0px 0px 0px 0px rgba(0,0,0,0.1);
			
			.bar-item{
				text-align: center;
				font-size:20rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(50,60,73,1);
				text-align: center;
				
				.item-icon{
					display: block;
					width: 44rpx;
					height:44rpx;
					margin: 0 auto 8rpx auto;
				}
			}
			
			.bar-item-active{
				color:rgba(102,166,255,1);
			}
		}
	}
</style>

 

引用：

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,
                    }
                ],

页面：  <ui-tab-bar :listData="listData"></ui-tab-bar>

 

效果：