前置准备工作
安装HBuilder-X
新建uniapp项目教程
使用HBuilder-X启动uniapp项目教程
实现底部导航栏
package.json中配置导航栏
在package.json里面配置，点击package.json文件。
在内容中添加底部菜单代码配置
"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/white，black 对应颜色 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 | 可选值 bottom、top，top 值仅微信小程序支持 | - |
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表示对象类型。
您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » [保姆级教程]uniapp实现底部导航栏
发表评论 取消回复