uniapp 设置底部导航栏

uniapp 设置原生 tabBar 底部导航栏。

设置底部导航栏

一、创建页面,一定要在 pages.json 文件中注册。

二、在 pages.json 文件中,设置 tabBar 配置项。

javascript 复制代码
pages.json 页面
{
  "pages": [...],
  "globalStyle": {...},
  "uniIdRouter": {...},
  // 其它配置...

  // 底部导航栏配置
  "tabBar": {
    "color": "#555555", // 文字颜色
    "selectedColor": "#FF5050", // 选中文字颜色
    "borderStyle": "white", // 上边框颜色 white 白色
    "backgroundColor": "#FFFFFF", // 背景颜色
    "list": [
      {
        "pagePath": "pages/a/a", // 页面路径
        "text": "首页", // 按钮文字
        "iconPath": "/static/home.png", // 默认图片
        "selectedIconPath": "/static/home-active.png" // 选中图片
      },
      {
        "pagePath": "pages/b/b", // 页面路径
        "text": "攻略", // 按钮文字
        "iconPath": "/static/strategy.png", // 默认图片
        "selectedIconPath": "/static/strategy-active.png" // 选中图片
      },
      {
        "pagePath": "pages/c/c", // 页面路径
        "text": "发布", // 按钮文字
        "iconPath": "/static/issue.png", // 默认图片
        "selectedIconPath": "/static/issue.png" // 选中图片
      },
      {
        "pagePath": "pages/d/d", // 页面路径
        "text": "排行榜", // 按钮文字
        "iconPath": "/static/ranking.png", // 默认图片
        "selectedIconPath": "/static/ranking-active.png" // 选中图片
      },
      {
        "pagePath": "pages/e/e", // 页面路径
        "text": "我的", // 按钮文字
        "iconPath": "/static/my.png", // 默认图片
        "selectedIconPath": "/static/my-active.png" // 选中图片
      }
    ]
  }

}

效果:

注:在 list 中最少配置 2 个页面,最多 5 个页面,另外不能使用网络图片。

设置徽标

一、在任意页面中,调用 uni.setTabBadge 方法,设置指定页面的徽标。

html 复制代码
<template>
  <view> 首页 </view>
</template>

<script>
  export default {
    // 其它配置项...
    mounted() {
      // 设置排行榜页面的徽标
      uni.setTabBarBadge({
        index: 3, // 页面下标
        text: '12', // text 的值必须是字符串
      })
    }
  }
</script>

效果:

原创作者:吴小糖

创作时间:2024.1.11

相关推荐
汤愈韬1 小时前
NTFS权限基础、权限累加规则、权限继承规则
windows·网络安全
刺客xs2 小时前
linux GDB调试器
linux·运维·windows
哦你看看2 小时前
学习Python 03
开发语言·windows·python
草莓工作室2 小时前
数据结构3:线性表2-顺序存储的线性表
数据结构·windows
阿拉-M833 小时前
IntelliJ IDEA Windows 系统高频快捷键使用手册
java·windows·intellij-idea
lingggggaaaa4 小时前
小迪安全v2023学习笔记(一百三十四讲)—— Windows权限提升篇&数据库篇&MySQL&MSSQL&Oracle&自动化项目
java·数据库·windows·笔记·学习·安全·网络安全
是店小二呀7 小时前
远程办公自由:rdesktop+cpolar让Windows桌面随身而行
windows
油丶酸萝卜别吃8 小时前
java8中常用的工具函数
windows
Bruce_Liuxiaowei8 小时前
Win7虚拟机加入域错误排查指南:解决无法启动服务问题
运维·网络·windows·安全·网络安全
雨中风华12 小时前
Windows 平台 HOOK DWM 桌面管理程序,实现输出变形的桌面图像到显示器
windows·计算机外设