uniapp自定义tabbar——中间特殊按钮-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp自定义tabbar——中间特殊按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方法一：原生tabbar，修改中间图标的样式

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

pages.json

"tabBar": {
		"color": "#cccccc",
		"selectedColor": "#2979ff",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/message/index",
				"iconPath": "static/tabbar/5.png",
				"selectedIconPath": "static/tabbar/5-5.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/home/index",
				"iconPath": "static/tabbar/logo.jpeg",
				"selectedIconPath": "static/tabbar/logo.jpeg",
				"text": ""
			},
			{
				"pagePath": "pages/my/index",
				"iconPath": "static/tabbar/6.png",
				"selectedIconPath": "static/tabbar/6-6.png",
				"text": "我的"
			}
		]
	}

样式覆盖 App.vue

// 底部tabbar
.uni-tabbar__item:nth-child(3) .uni-tabbar__icon {
	width: 36px !important;
	height: 36px !important;
}

消息设置角标

uni.setTabBarBadge({
	index: 0,
	text: '2'
})

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

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

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页面

uniapp自定义tabbar——中间特殊按钮,uniapp,前端文章来源地址https://www.toymoban.com/news/detail-686741.html

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',
				});
			})
		},