# F NAV - 移动端导航选项卡

**URL:** https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277
**Category:** Theme component
**Tags:** mobile
**Created:** [2024年十二月13日 13:12 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277 "2024-12-13T13:12:16Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)
#### Post date: [2025年四月23日 09:00 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/42 "2025-04-23T09:00:45Z")

</div>

该组件是否支持在 **F 导航标签** 中添加“发布”按钮？

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月23日 09:04 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/43 "2025-04-23T09:04:51Z")

</div>

您是指创建新主题选项卡吗？

---

<div class="post-metadata">

### Author: ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)
#### Post date: [2025年四月23日 09:12 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/44 "2025-04-23T09:12:11Z")

</div>

是的。在 F 导航标签区域添加一个“发布新主题”按钮。  
 ![aaaaa](https://global.discourse-cdn.com/meta/original/4X/2/4/5/24544df3013477a2e3979565d0c89c3d8d269b1f.png)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月23日 09:17 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/45 "2025-04-23T09:17:59Z")

</div>

当然可以，只需在设置中将该选项卡添加到该位置即可。

> [@Don](#):
>
> 例如，添加主题创建选项卡将如下所示。
> 
> ![Screenshot 2024-12-12 at 18.53.57](https://global.discourse-cdn.com/meta/original/4X/7/9/7/797e2a298cbf94448fa4a2961fcd0e4e4d59381d.png)
> 
> ![Screenshot 2024-12-12 at 18.55.50](https://global.discourse-cdn.com/meta/original/4X/2/d/1/2d1348ac9aca8239cfe6d82292ce1ca35f05ea6a.png)

---

<div class="post-metadata">

### Author: ![ozkn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ozkn/32/196013_2.png) [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [2025年四月23日 09:24 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/46 "2025-04-23T09:24:33Z")

</div>

你好 @Don，

在 discourse 最新更新后，主题组件出现错误，无法正常工作。

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月23日 09:52 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/47 "2025-04-23T09:52:48Z")

</div>

你好 👋

> [@F NAV - Mobile Navigation Tabs](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/41?u=don):
>
> Oh okay, got it. Thanks for the report. The scrollTop mixin was removed from the core, and that caused the issue. But we don’t actually use it, so it probably just got left in there by accident. Fixed it here: [FIX: ScrollTop mixin removed from core · VaperinaDEV/f-nav-for-mobile@6ec554c · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile/commit/6ec554c9ed6a7710867b4a72a1b0cd8b79dab9fb) Please update the component.

---

<div class="post-metadata">

### Author: ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)
#### Post date: [2025年四月23日 11:37 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/48 "2025-04-23T11:37:49Z")

</div>

我仍在继续使用您的 SoundCloud Music Player 组件，有几个问题想请教一下。

关于 [SoundCloud Music Player](https://meta.discourse.org/t/floating-audio-player-for-entire-forum/275078/12?u=joo) 的几点：

- 移动端重叠：在移动端，它与“F NAV - Mobile”重叠。能否优化其在移动端的显示位置？
- YouTube Music：此组件是否有计划支持 YouTube Music？

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2025年四月24日 02:02 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/49 "2025-04-24T02:02:27Z")

</div>

您好，是否可以将新主题按钮添加到底部工具栏？

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月24日 05:42 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/50 "2025-04-24T05:42:58Z")

</div>

> [@F NAV - Mobile Navigation Tabs](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/45?u=don):
>
> Sure, that’s possible just add the tab to that position in the setting.

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2025年四月24日 12:23 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/51 "2025-04-24T12:23:40Z")

</div>

谢谢，它奏效了。我曾使用过您的浮动导航按钮组件，但它给了我错误，所以我不得不禁用并删除了它。

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [2025年五月4日 11:55 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/52 "2025-05-04T11:55:56Z")

</div>

我正在考虑将此添加到我的论坛，但我刚在主题创建器上对其进行了测试，当您有草稿正在进行时，您无法使用选项卡，因为它们被遮挡了：

 ![图片显示了一个名为“撰写基本指南的基本指南（文档示例）”的草稿帖子，位于平台上的操作指南部分，并带有占位符提醒“草稿帖子正在进行中。点击以恢复。”（由 AI 题注）](https://global.discourse-cdn.com/meta/original/4X/0/1/c/01ca2da075d71f52c3af6ec3f4879f4b3adae12d.jpeg)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年五月6日 08:19 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/53 "2025-05-06T08:19:33Z")

</div>

您好 👋 感谢您的报告！这是修复程序，同时也进行了一些其他改进：[FIX: Issue with flashing on iOS devices, prevents closing on scroll-lock too and fixes the reply draft position by VaperinaDEV · Pull Request #5 · VaperinaDEV/f-nav-for-mobile · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile/pull/5/files)

---

<div class="post-metadata">

### Author: ![ozkn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ozkn/32/196013_2.png) [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [2025年五月6日 08:54 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/54 "2025-05-06T08:54:52Z")

</div>

你好 @don，我们可以在组件的图标下方添加诸如主页、通知、消息之类的文字吗？

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年五月10日 19:20 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/55 "2025-05-10T19:20:10Z")

</div>

你好 @ozkn 👋

谢谢，我刚刚合并了一个更新来支持此功能：[FEATURE: Show tab label by VaperinaDEV · Pull Request #6 · VaperinaDEV/f-nav-for-mobile · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile/pull/6)

已添加新的主题设置：`f_nav_show_labels`

现在会根据 `f_nav_tabs` 设置中的 `name` 值显示标签。

 ![Screenshot 2025-05-10 at 21.21.55](https://global.discourse-cdn.com/meta/original/4X/d/e/9/de956af5427ccbfa2f93487277d33ffe3bd1b36f.png)

![Screenshot 2025-05-10 at 21.07.22](https://global.discourse-cdn.com/meta/original/4X/7/2/2/722e4f693dedf31e1c20fe5a764a1de6509e4eee.png)

在主题页面上，“Home”选项卡的标签将替换为 `js.back_button` 键。

![Screenshot 2025-05-10 at 21.08.23](https://global.discourse-cdn.com/meta/original/4X/8/8/3/883bbb042f960572c832282376d0856794cf2ba3.png)

---

<div class="post-metadata">

### Author: ![ozkn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ozkn/32/196013_2.png) [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [2025年五月10日 19:37 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/56 "2025-05-10T19:37:35Z")

</div>

谢谢 @don

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2025年五月14日 10:30 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/57 "2025-05-14T10:30:09Z")

</div>

您好 @Don，我注意到我无法更改消息图标，它是硬编码的。有什么办法可以让我将按钮图标更改为其他图标吗？

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [2025年六月5日 22:06 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/58 "2025-06-05T22:06:42Z")

</div>

这个主题组件太棒了，谢谢！ ~~它似乎还没有为 Horizon 准备好？~~

 ![fnav-horizon-double-icons](https://global.discourse-cdn.com/meta/original/4X/1/2/1/121da59913be068dfd899130215a43a10ba64171.png)

~~我尝试用很多方法隐藏那个图标，但都没有成功。它只在手机上出现，在桌面上不出现。~~

**[编辑]** 已经按如下方式完成了：

```plaintext
// 在手机上隐藏用户菜单面板
.d-header-icons .header-dropdown-toggle [data-identifier=\"avatar-profile\"] {
display: none !important;
}

```

我更喜欢固定的导航栏，所以我稍微调整了一下组件：

```plaintext
// 滚动时固定导航（手机上的桌面模式）
body.f-nav-hidden:not(
    .archetype-regular,
    .archetype-private_message,
    .has-full-page-chat
  )
  .list-controls {
  position: static;
}

```

_这可以防止那些和我一样寻找此功能的人使用自动隐藏滚动功能。_

---

<div class="post-metadata">

### Author: ![MihirR](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mihirr/32/475158_2.png) [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2025年六月13日 16:20 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/59 "2025-06-13T16:20:18Z")

</div>

实际上是在寻找类似的东西，但用于标题。

---

<div class="post-metadata">

### Author: ![MihirR](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mihirr/32/475158_2.png) [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2025年六月13日 16:57 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/60 "2025-06-13T16:57:33Z")

</div>

如果有人需要粘性标题，这里有一个：

```

body.f-nav-hidden .d-header-wrap {  
animation: none !important;  
opacity: 1 !important;  
transform: none !important;  
visibility: visible !important;  
position: sticky !important;  
top: 0 !important;  
z-index: 1000 !important; // 确保它保持在其他元素之上  
}

```

---

<div class="post-metadata">

### Author: ![clacle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clacle/32/497163_2.png) [@clacle](https://meta.discourse.org/u/clacle)
#### Post date: [2025年六月20日 13:27 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/62 "2025-06-20T13:27:28Z")

</div>

您是否遇到此问题：添加聊天后，收到的消息中“数字”的位置不正确？  
 ![image](https://global.discourse-cdn.com/meta/original/4X/e/a/5/ea5772242e10c6be3bd616deb05a29aeb1c80213.png)

[上一頁](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=2)

[下一頁](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=4)
