微信公众号开发

uniapp 小程序实现中间突起tabbar

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

先看下效果
![在这里插入图片描述](https://www.www.zyiz.net/i/ll/?i=e9f21ca97bbc4ae89c223d775c85931f.png?,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YCY6IulaGZs,size_13,color_FFFFFF,t_70,g_se,x_16

实现步骤

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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!