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

相关推荐
非凡ghost13 小时前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
熊文豪18 小时前
Windows安装RabbitMQ保姆级教程
windows·分布式·rabbitmq·安装rabbitmq
搬砖的小码农_Sky18 小时前
Windows操作系统上`ping`命令的用法详解
运维·网络·windows
Kiri霧1 天前
Rust模式匹配详解
开发语言·windows·rust
程序设计实验室1 天前
使用命令行删除 Windows 网络映射驱动器
windows
用户31187945592181 天前
Windows 电脑安装 XTerminal 1.25.1 x64 版(带安装包下载关键词)
windows
Logintern091 天前
windows如何设置mongodb的副本集
数据库·windows·mongodb
Chandler241 天前
一图掌握 操作系统 核心要点
linux·windows·后端·系统
ajassi20001 天前
开源 C# 快速开发(十七)进程--消息队列MSMQ
windows·开源·c#
Python私教1 天前
5分钟上手 MongoDB:从零安装到第一条数据插入(Windows / macOS / Linux 全平台图解)
windows·mongodb·macos