uni-app 自定义tab组件_uniapp tab组件

1.因老板越来越喜欢花里胡哨的Tab栏 有感写下自定义tab

<template>
	<view class="tabbar">
		<view class="uni-tabbar">
				<view class="uni-tabbar__item row-d row-c" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
					<view :class="[item.pagePath==pagePath?'uni-active':'', 'row-d' ,'row-c']">
						<image :src="item.pagePath==pagePath?item.selectedIconPath:item.iconPath"></image>
						<view class="uni-tabbar__label">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	
	export  default {
		props: {
		            pagePath: null
		        },

		data() {
			return {
				page: 'contact',
				showPage: false,
				containerHeight: 400,
				tabbar: [
					{
						"pagePath": "/pages/home/home",
						"iconPath": "/static/home@2x.png",
						"selectedIconPath": "/static/home@2x (1).png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/square/square",
						"iconPath": "/static/Book@2x.png",
						"selectedIconPath": "/static/Icon_explore@2x2.png",
						"text": "广场"
					},
					{
						"pagePath": "/pages/news/news",
						"iconPath": "/static/Books@2x.png",
						"selectedIconPath": "/static/Books@2x2.png",
						"text": "消息"
					},
					{
						"pagePath": "/pages/user/user",
						"iconPath": "/static/email-2@2x (1).png",
						"selectedIconPath": "/static/email-2@2x2.png",
						"text": "我的"
					}
				],
			}
		},
		created() {
			
		},
		methods: {
			changeTab(item) {
			                // this.page = item.pagePath;
			                uni.switchTab({
			                    url: item.pagePath,
			                });
			            }
		}
	}
</script>

<style lang="scss" scoped>
	.uni-tabbar {
	        position: fixed;
	        bottom: 0;
	        width: 100%;
	        display: flex;
	        justify-content: space-between;
	        background-color: #fff;
			height: 160rpx;
			border-radius: 56rpx 56rpx 0 0;
			box-shadow: 0rpx 4rpx 56rpx 0rpx rgba(0, 0, 0, 0.13);
			padding: 28rpx 50rpx 46rpx ;
			z-index: 16;
	        // box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
	        .uni-tabbar__item {
	            // display: block;
				width: 96rpx;
				height: 112rpx;
				position: relative;
	            font-size: 12rpx;
	            text-align: center;
				color: #979797;
				.uni-active {
					
				}
				image{
					width: 48rpx;
					height: 48rpx;
					flex-shrink: 0;
				}
	        }
	        .uni-tabbar__label {
	            font-size: 12px;
				margin-top: 6rpx;
	        }
			.uni-active {
				width: 96rpx;
				height: 112rpx;
				color: #fff !important;
				border-radius: 16rpx;
				background:  linear-gradient(148.79deg, rgba(68, 0, 240, 1) 0%, rgba(221, 48, 255, 1) 100%);
				position: absolute;
				top: -52rpx;
			}
	    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

引用方法
1.在page.json 中的tabBar放上你的四个页面
2.在main.js 全局注册

import Tabbar from './components/tabbar.vue'
Vue.component('Tabbar', Tabbar)
1
2

2.在四个页面中写入 地址写你tab地址

<Tabbar :pagePath="'/pages/home/home'"></Tabbar>
1

效果图

愿各位前端好兄弟，早日提桶跑路