uniapp 小程序实现中间突起tabbar

原创

已于 2023-06-14 13:46:23 修改 · 置顶 · 5.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #uni-app

于 2021-09-08 10:48:22 首次发布

本文介绍如何在uni-app中使用uView UI框架实现具有中间突起效果的Tabbar。首先需要引入uView UI，并按照教程配置组件和页面。接着在pages.json文件中进行设置，然后创建Tabbar组件及其对应页面。通过Tabbar组件的list属性来定制每个Tabbar项的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/e9f21ca97bbc4ae89c223d775c85931f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YCY6IulaGZs,size_13,color_FFFFFF,t_70,g_se,x_16

实现步骤

1.先引入uview ui（1.0版本），不会的可以看下我另外一篇文章，写的很详细
uniapp 中uview-ui的使用教程
https://blog.youkuaiyun.com/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":