uniapp自定义tabbar——中间特殊按钮

uview2.0自定义tabbar组件，适用任意情况

tabbar组件

<template>
	<u-tabbar :value="tab" @change="changeTab" :fixed="true" :border="true" :placeholder="true"
		:safeAreaInsetBottom="true">
		<u-tabbar-item text="消息" icon="chat" badge="3"></u-tabbar-item>
		<u-tabbar-item text="">
			<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../static/wallet.png"></image>
			<image style="width: 80rpx;height: 80rpx;" slot="inactive-icon" src="../static/wallet.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="设置" icon="setting"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
    
    
		props: {
    
    
			tab: {
    
    
				type: Number,
				require: true
			},
		},
		data() {
    
    
			return {
    
    
				list: ["/pages/message/index", '/pages/home/index', "/pages/set/index"]
			}
		},
		methods: {
    
    
			changeTab(name) {
    
    
				console.log(88, name)
				uni.reLaunch({
    
    
					url: this.list[name]
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
    
    
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

main.js全局组件注册

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

主页面使用

• 在三个主页面分别引入组件
• 传入对于的索引即可

<!-- 自定义底部-->
<tabbar :tab="1"></tabbar>

uniapp配置midButton：适用点击中间图标跳转非tabbar页面

pages.json配置midButton

"tabBar": {
    
    
		"color": "#cccccc",
		"selectedColor": "#E84118",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
    
    
			"pagePath": "pages/home/index",
			"iconPath": "static/tabbar/1.png",
			"selectedIconPath": "static/tabbar/1-1.png",
			"text": "首页"
		}, {
    
    
			"pagePath": "pages/classify/index",
			"iconPath": "static/tabbar/2.png",
			"selectedIconPath": "static/tabbar/2-2.png",
			"text": "分类"
		}, {
    
    
			"pagePath": "pages/cart/index",
			"iconPath": "static/tabbar/3.png",
			"selectedIconPath": "static/tabbar/3-3.png",
			"text": "购物车"
		}, {
    
    
			"pagePath": "pages/my/index",
			"iconPath": "static/tabbar/4.png",
			"selectedIconPath": "static/tabbar/4-4.png",
			"text": "我的"
		}],
		// 中间按钮
		"midButton": {
    
    
			"pagePath": "pages/my/index",
			"width": "60px",
			"height": "45px",
			"text": "",
			"iconPath": "static/wallet.png",
			"iconWidth": "40px"
		}
	}

app.vue

		onLaunch: function() {
    
    
			console.log('App Launch')
			uni.onTabBarMidButtonTap(() => {
    
    
				uni.navigateTo({
    
    
					url: '/pages/home/list',
				});
			})
		},