uni-app 底部tabbar字体问题

uni-app 底部tabbar字体问题

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.2.1
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 Android
手机系统版本号 Android 13
手机厂商 vivo
手机机型 vivo Y53t
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

@font-face {  
    font-family: 'pht55';  
    src: url("static/font/AlibabaPuHuiTi-3-55-Regular.ttf");  
}  

@font-face {  
    font-family: 'pht65';  
    src: url("static/font/AlibabaPuHuiTi-3-65-Medium.ttf");  
}  

@font-face {  
    font-family: 'pht85';  
    src: url("static/font/AlibabaPuHuiTi-3-85-Bold.ttf");  
}  

body {  
    // font-family: Helvetica Neue, Helvetica, sans-serif;  
    font-family: 'pht55';  
}  

view {  
    font-family: 'pht55';  
}  

text {  
    font-family: 'pht55';  
}  

button {  
    font-family: 'pht55';  
}  

.font-regular {  
    font-family: 'pht55';  
}  

.font-medium {  
    font-family: 'pht65';  
}  

.font-bold {  
    font-family: 'pht85';  
}  

::v-deep uni-tabbar .uni-tabbar__bd .uni-tabbar__label {  
    font-family: 'pht65';  
}

操作步骤：

  • 在app.vue中实现上述代码示例

预期结果：

  • 可以改变字体

实际结果：

  • H5可以改变，app未能改变字体

bug描述：

  • 底部 tabbar上使用 font-family 不生效

更多关于uni-app 底部tabbar字体问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

app的tabbar是原生组件哦 css是不能修改到样式的 你可以用自定义tabbar组件 然后在设置字体 插件市场中也有很多tabbar组件 你可以找一个合适的 然后修改字体样式

更多关于uni-app 底部tabbar字体问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


自定义tabbar性能不如原生，请问原生的tabbar还有其他的方式能改变字体吗？

回复 y***@163.com: 没发现可以直接修改字体样式的方法

自定义tabbar确实不如 原生 但是你可以自定义tabbar 然后使用原生的跳转能力 保留原生tabbar 然后在自定义一个tabbar 再把原生tabbar使用uni.hideTabBar()将其隐藏 自定义tabbar中就用uni.switchTab进行跳转 这样就可以跟原生一样流畅了 还能自定义样式 我项目中都是用这种方式实现的 很丝滑

在 uni-app 中，如果你遇到底部 TabBar 字体问题，可能是由于样式设置、平台差异或其他配置问题导致的。以下是一些常见的解决方案和注意事项：

1. 检查 pages.json 配置

uni-app 的 TabBar 配置在 pages.json 中。确保你正确配置了 TabBar 的字体颜色、选中颜色等属性。

{
  "tabBar": {
    "color": "#999999", // 默认字体颜色
    "selectedColor": "#007AFF", // 选中时的字体颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user_selected.png"
      }
    ]
  }
}
  • color：默认字体颜色。
  • selectedColor：选中时的字体颜色。

2. 字体大小问题

uni-app 的 TabBar 默认字体大小可能不符合你的需求。你可以通过自定义样式来调整字体大小。

  • 在 App.vue 或全局样式中添加以下 CSS：

    .uni-tabbar__label {
  font-size: 12px; /* 调整字体大小 */
}

3. 平台差异

uni-app 支持多端编译，不同平台（如微信小程序、H5、App）可能会有不同的表现。你可以通过条件编译来处理平台差异。

  • 在 pages.json 中使用条件编译：

    {
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user_selected.png"
      }
    ],
    // 针对微信小程序的额外配置
    "#ifdef MP-WEIXIN": {
      "backgroundColor": "#ffffff",
      "borderStyle": "black"
    }
  }
}

4. 自定义 TabBar

如果 uni-app 自带的 TabBar 无法满足你的需求，你可以考虑自定义 TabBar。通过 view 和 navigator 组件实现自定义的底部导航栏。

  • 在 pages.json 中禁用默认的 TabBar：

    {
  "tabBar": {
    "custom": true
  }
}

  • 在 App.vue 或页面组件中实现自定义 TabBar：

    <template>
  <view class="custom-tabbar">
    <navigator url="/pages/index/index" class="tabbar-item">
      <image src="/static/tabbar/home.png" mode="aspectFit"></image>
      <text>首页</text>
    </navigator>
    <navigator url="/pages/user/user" class="tabbar-item">
      <image src="/static/tabbar/user.png" mode="aspectFit"></image>
      <text>我的</text>
    </navigator>
  </view>
</template>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  padding: 10px 0;
  border-top: 1px solid #e5e5e5;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabbar-item text {
  font-size: 12px;
  color: #999999;
}
.tabbar-item.active text {
  color: #007AFF;
}
</style>
回到顶部