uniapp 底部导航栏 tabBar

简介: uniapp 底部导航栏 tabBar

在 static 文件夹中新建文件夹 tabBar,放入标签图片

源素材如下:

在 pages.json 中添加

  // 底部导航
  "tabBar": {
    // tab默认文字颜色
    "color": "#bfbfbf",
    // tab选中后的文字颜色
    "selectedColor": "#153c65",
    // 底栏列表
    "list": [{
        // tab默认图标路径
        "iconPath": "static/tabBar/tabBar_index_default.png",
        // tab选中后的图标路径
        "selectedIconPath": "static/tabBar/tabBar_index_selected.png",
        // tab跳转的页面路径
        "pagePath": "pages/index/index",
        // tab文字
        "text": "首页"
      },
      {
        "iconPath": "static/tabBar/tabBar_me_default.png",
        "selectedIconPath": "static/tabBar/tabBar_me_selected.png",
        "pagePath": "pages/me/me",
        "text": "我的"
      }
    ]
  },

预览效果如下

目录
相关文章
|
6月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
172 0
|
5月前
|
移动开发 前端开发 小程序
[保姆级教程]uniapp实现底部导航栏
【6月更文挑战第6天】
298 0
|
6月前
uniapp 设置底部导航栏
uniapp 设置底部导航栏
198 1
|
前端开发 JavaScript 搜索推荐
UniApp TabBar的巅峰之作:个性化导航的魅力
UniApp TabBar的巅峰之作:个性化导航的魅力
632 0
|
6月前
|
缓存 JavaScript 小程序
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
508 0
|
6月前
uniapp点击tabbar之前做判断
uniapp点击tabbar之前做判断
386 1
|
6月前
uniapp自定义tabbar
uniapp自定义tabbar
62 0
|
小程序 开发者
【 uniapp - 黑马优购 | tabBar】如何创建和配置标签栏
【 uniapp - 黑马优购 | tabBar】如何创建和配置标签栏
87 0
uniapp项目实战系列(3):底部导航栏与头部导航栏的配置
uniapp项目实战系列(3):底部导航栏与头部导航栏的配置
237 0
uniapp设置tabBar跳转后,其他页面跳转到主页、主页参数、接参(整理)
uniapp设置tabBar跳转后,其他页面跳转到主页、主页参数、接参(整理)