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

简介: 【6月更文挑战第6天】

前置准备工作

安装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/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 表示对象类型。

您好,我是肥晨。

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

目录
相关文章
|
2月前
|
移动开发 JavaScript 小程序
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
147 1
uniapp中间加号点击弹窗怎么实现?完整教程
|
2月前
|
编解码 数据安全/隐私保护 开发者
uniapp打包的ipa上架到appstore的傻瓜式教程
uniapp打包的ipa上架到appstore的傻瓜式教程
64 0
|
2月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
110 0
|
7月前
|
编译器 定位技术 API
|
2月前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
171 3
|
8月前
|
移动开发 安全 JavaScript
uniapp打包成H5部署到服务器教程
uniapp打包成H5部署到服务器教程
839 0
|
20天前
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
20 5
|
7天前
uniapp 底部导航栏 tabBar
uniapp 底部导航栏 tabBar
13 0
|
24天前
|
前端开发 开发工具 git
[巨详细]使用HBuilder-X启动uniapp项目教程
【6月更文挑战第6天】使用HBuilder-X启动uniapp项目教程 先用HBuilder-X打开本地的uniapp项目
53 0
|
2月前
uniapp 设置底部导航栏
uniapp 设置底部导航栏
115 1