[保姆级教程]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 表示对象类型。

您好,我是肥晨。

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

相关推荐
1900431 小时前
linux复习5:C prog
linux·运维·服务器
程序员小羊!1 小时前
高级 SQL 技巧讲解
windows
小小黑0072 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字2 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
李迟2 小时前
某Linux发行版本无法使用nodejs程序重命名文件问题的研究
java·linux·服务器
酷酷学!!!3 小时前
Linux基础指令(汇总)
linux·运维·服务器
xiangshangdemayi3 小时前
Windows环境GeoServer打包Docker极速入门
windows·docker·容器·geoserver·打包·数据挂载
前端小胡兔3 小时前
uniapp rpx兼容平板
uni-app
荔枝吖3 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗3 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64