【AmazeUI】底部导航条的改进

最新推荐文章于 2021-03-13 08:13:49 发布

原创最新推荐文章于 2021-03-13 08:13:49 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#AmazeUI #导航 #底部导航栏 #隐藏 #手机

AmazeUI 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用AmazeUI实现底部导航条在屏幕尺寸较小时隐藏多余导航项的功能。通过添加特定属性，当设备屏幕过窄时，可以自动隐藏部分导航项，并显示‘更多’选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AmazeUI的底部导航条已经在《【AmazeUI】底部导航栏与分享按钮》（点击打开链接）中介绍过了。

其实如果你的底部导航条中的导航过多，这个底部导航条还可以把后面的导航项隐藏起来。

然后提供一个上拉工具的“更多”

如果要实现这种效果，关键是在ul节点的属性中加入am-cf am-avg-sm-3这两个属性，如果不加，无论你的屏幕多窄，它都不隐藏选项，如果加上了，当设备的屏幕过小，它会隐藏多余的项的。

<div class="am-navbar am-navbar-default" data-am-widget="navbar">
    <ul class="am-navbar-nav am-cf am-avg-sm-3"><!--导航条是否隐藏多余项的关键参数-->
        <li>
            <a href="#">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-user-md"></span>
                <span class="am-navbar-label">个人</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-star"></span>
                <span class="am-navbar-label">收藏</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-share-square-o"></span>
                <span class="am-navbar-label">分享</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-comments-o"></span>
                <span class="am-navbar-label">聊天</span>
            </a>
        </li>      
    </ul>
</div>