uniapp 小程序实现中间突起tabbar

本文主要是介绍uniapp 小程序实现中间突起tabbar，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先看下效果

实现步骤

1.先引入uview ui，不会的可以看下我另外一篇文章，写的很详细
uniapp 中uview-ui的使用教程
https://blog.csdn.net/hu104160112/article/details/120076812?spm=1001.2014.3001.5501

2.创建tabbar 组件及页面

3.pages.json文件中配置

{	
	"easycom": {
		"autoscan": true,
		"custom": {
			"^uni-(.*)": "@/components/uni-$1/uni-$1.vue",
			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
		{
			"path": "pages/tabbar/tabbar1",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar2",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar3",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar4",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar5",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
	    "list": [{
	        "pagePath": "pages/tabbar/tabbar1"	        
	    }, {
	        "pagePath": "pages/tabbar/tabbar2"	        
	    },{
	        "pagePath": "pages/tabbar/tabbar3"	        
	    },{
	        "pagePath": "pages/tabbar/tabbar4"
	    },{
	        "pagePath": "pages/tabbar/tabbar5"
	    }]
	}
}

4.tabbar组件

<template>
	<view>
		<view class="u-page">
			<!-- 所有内容的容器 -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true" active-color='#5098FF'></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: true,
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar1',
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar2',
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar3',
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar4',
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar5',
					}
				],
				current: 0
			}
		},
	}
</script>

5.tabbar1，2，3，4，5等页面

<template>
	<view>
		<view class="">tabbar1</view>
		<tabbar></tabbar>
	</view>
	
</template>

<script>
	import {tabbar} from "../../components/tabbar.vue"
	export default{
		components:{
			tabbar
		},
		data(){
			return {}
		},
	}
</script>

<style>
</style>

这样就可以了

下面是 tabbar组件里list的属性配置，也就是每个tabbar的配置

// 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
// 或者png图标的【绝对路径】，建议尺寸为80px * 80px
// 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
// 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
list = [
	{
		iconPath: "home", //未激活（未选中）的图标
		selectedIconPath: "home-fill", // 激活(选中)的图标
		text: '首页', // tabbar显示的提示文字
		count: 2, // 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
		isDot: true, // 如果配置此值为true，那么角标将会以红点的形式显示
		customIcon: false, // 如果使用自定义扩展的图标库字体，需配置此值为true
		midButton: false, // 如果是凸起按钮项，需配置此值为true
		pagePath: '', // 点击某一个tabbar时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径，需要以"/"开头
	}
]

这篇关于uniapp 小程序实现中间突起tabbar的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！