苏南大叔表示:本篇weuinavbar的文章可能比较水啊。因为在weui里面的tabbarnavbar,几乎效果就是一样的。只不过tabbar是放在底部的。而navbar是放在页面顶部的。其它的panel内容切换逻辑,都是一致一致的。所以,如果把上一篇文章中的tabbar直接替换成navbar,就基本上是本篇文章的主体内容了。weuitabbar说明链接,见文末相关链接区域。

苏南大叔:weui框架组件小白入门指南:navbar如何使用 - weui-navbar
weui框架组件小白入门指南:navbar如何使用(图5-1)

本文测试环境:macweui@1.1.3

范例代码

weui中的navbar的基本代码,显示如下:

苏南大叔:weui框架组件小白入门指南:navbar如何使用 - navbar-code
weui框架组件小白入门指南:navbar如何使用(图5-2)

基本结构:

<div class="weui-tab">
    <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">
            选项一
        </div>
        <div class="weui-navbar__item">
            选项二
        </div>
        <div class="weui-navbar__item">
            选项三
        </div>
    </div>
    <div class="weui-tab__panel">
        <div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active">
            内容一
        </div>
        <div id="tab2" class="weui_tab_bd_item">
            内容二
        </div>
        <div id="tab3" class="weui_tab_bd_item">
            内容三
        </div>
    </div>
</div>

css部分:

.weui_tab_bd_item{height: 100%;overflow: auto;display:none;}
.weui_tab_bd_item.weui_tab_bd_item_active{display:block;}

苏南大叔:weui框架组件小白入门指南:navbar如何使用 - weui-navbar-css
weui框架组件小白入门指南:navbar如何使用(图5-3)

js部分:

$(function () {
    $('.weui-navbar__item').on('click', function () {
        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        var index=$(this).index();
        $(".weui-tab__panel .weui_tab_bd_item").eq(index).addClass("weui_tab_bd_item_active").siblings().removeClass("weui_tab_bd_item_active");
    });
});

苏南大叔:weui框架组件小白入门指南:navbar如何使用 - weui-navbar-js
weui框架组件小白入门指南:navbar如何使用(图5-4)

相关链接

总结

weui标准库里面,navbartabbar合称为导航相关。截至到发稿,这个导航相关分类里面,就这两个组件:navbartabbar。两者的使用方式,基本一致。

更多weui相关经验文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   weui

本站的忠实读者小伙伴,正在阅读下面这些文章: