[保姆级教程]uniapp实现底部导航栏

文章目录


前置准备工作

安装HBuilder-X

详细步骤可看上文》》

新建uniapp项目教程

详细步骤可看上文》》

使用HBuilder-X启动uniapp项目教程

详细步骤可看上文》》

实现底部导航栏

package.json中配置导航栏

在package.json里面配置,点击package.json文件。

在内容中添加底部菜单代码配置

csharp 复制代码
"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/component/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

页面效果:

注意:地址需要有页面才行,不然不会显示底部导航栏

详细配置内容

以下是 TabBar 的相关属性说明:

属性名 类型 必填 默认值 描述 适配版本
color HexColor - tab 上的文字默认颜色 -
selectedColor HexColor - tab 上的文字选中时的颜色 -
backgroundColor HexColor - tab 的背景色 -
borderStyle String black tabbar 上边框的颜色,可选值 black/whiteblack 对应颜色 rgba(0,0,0,0.33)white 对应颜色 rgba(255,255,255,0.33) App 2.3.4+ 、H5 3.0.0+
blurEffect String none iOS 高斯模糊效果,可选值 dark/extralight/light/none(参考: 使用说明) App 2.4.0+ 支持、H5 3.0.0+(只有最新版浏览器才支持)
list Array - tab 的列表,详见 list 属性说明,最少2个、最多5个 tab -
position String bottom 可选值 bottomtoptop 值仅微信小程序支持 -
fontSize String 10px 文字默认大小 App 2.3.4+、H5 3.0.0+
iconWidth String 24px 图标默认宽度(高度等比例缩放) App 2.3.4+、H5 3.0.0+
spacing String 3px 图标和文字的间距 App 2.3.4+、H5 3.0.0+
height String 50px tabBar 默认高度 App 2.3.4+、H5 3.0.0+
midButton Object - 中间按钮,仅在 list 项为偶数时有效 App 2.3.4+、H5 3.0.0+
iconfontSrc String - list 设置 iconfont 属性时,需要指定字体文件路径 App 3.4.4+、H5 3.5.3+
backgroundImage String - 设置背景图片,优先级高于 backgroundColor App
backgroundRepeat String - 设置标题栏的背景图平铺方式,可取值:"repeat" - 背景图片在垂直方向和水平方向平铺;"repeat-x" - 背景图片在水平方向平铺,垂直方向拉伸;"repeat-y" - 背景图片在垂直方向平铺,水平方向拉伸;"no-repeat" - 背景图片在垂直方向和水平方向都拉伸。默认使用 "no-repeat" App
redDotColor String - tabbar 上红点颜色 App

  • HexColor 表示十六进制颜色值,例如 #FF0000 表示红色。
  • String 表示字符串类型。
  • Array 表示数组类型。
  • Object 表示对象类型。

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
萨格拉斯救世主39 分钟前
戴尔R930服务器增加 Intel X710-DA2双万兆光口含模块
运维·服务器
无所谓จุ๊บ40 分钟前
树莓派开发相关知识十 -小试服务器
服务器·网络·树莓派
Jtti42 分钟前
Windows系统服务器怎么设置远程连接?详细步骤
运维·服务器·windows
yeyuningzi1 小时前
Debian 12环境里部署nginx步骤记录
linux·运维·服务器
小奥超人1 小时前
PPT文件设置了修改权限,如何取消权?
windows·经验分享·microsoft·ppt·办公技巧
EasyCVR2 小时前
萤石设备视频接入平台EasyCVR多品牌摄像机视频平台海康ehome平台(ISUP)接入EasyCVR不在线如何排查?
运维·服务器·网络·人工智能·ffmpeg·音视频
瑶琴AI前端2 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
龙哥说跨境3 小时前
如何利用指纹浏览器爬虫绕过Cloudflare的防护?
服务器·网络·python·网络爬虫
pk_xz1234565 小时前
Shell 脚本中变量和字符串的入门介绍
linux·运维·服务器