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

相关推荐
梓仁沐白6 小时前
ubuntu+windows双系统切换后蓝牙设备无法连接
windows·ubuntu
九鼎科技-Leo10 小时前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
Yang.9913 小时前
基于Windows系统用C++做一个点名工具
c++·windows·sql·visual studio code·sqlite3
我不瘦但很逗13 小时前
Windows下使用DBeaver连接云数据库(MySQL)
数据库·windows
ashane131414 小时前
Java list
java·windows·list
万里沧海寄云帆14 小时前
Word 插入分节符页码更新问题
windows·microsoft·word
dot.Net安全矩阵15 小时前
.NET 通过模块和驱动收集本地EDR的工具
windows·安全·web安全·.net·交互
编程修仙17 小时前
Collections工具类
linux·windows·python
程序员小羊!18 小时前
高级 SQL 技巧讲解
windows
xiangshangdemayi20 小时前
Windows环境GeoServer打包Docker极速入门
windows·docker·容器·geoserver·打包·数据挂载