小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

微信设置底部导航栏_微信小程序底部导航栏

作者：小蓝xlanll | 2024-02-18 22:15:51

踩

微信小程序底部导航栏

转

微信小程序设置底部导航栏目方法

2016年10月27日 10:58:06 阅读数：50830 标签：微信小程序收起

个人分类：微信小程序

微信小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家。

好了小程序的头部标题设置好了，我们来说说底部导航栏是如何实现的。

我们先来看个效果图

这里，我们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加5个。

那他们是怎么出现怎么着色的呢？两步就搞定！

1. 图标准备

阿里图标库 http://www.iconfont.cn/collections/show/29

我们进入该网站，鼠标滑到一个喜欢的图标上面点击下方的下载按钮

在弹出框中选择了俩个不同颜色的图标选择64px大小即可，我选择的是png 然后下载下来起上别名

将上述起好名字的图标保存到小程序项目目录中新创建的 images 文件夹中，准备工作就做好了

2. 更改配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息


     
     
       
       
        
        
       
       
       
       
        
        
         
          “tabBar”: {
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             “color”: “#a9b7b7”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             “selectedColor”: “#11cd6e”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             “borderStyle”:”white”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             “list”: [{
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “selectedIconPath”: “images/111.png”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “iconPath”: “images/11.png”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “pagePath”: “pages/index/index”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “text”: “首页”
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             }, {
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “selectedIconPath”: “images/221.png”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “iconPath”: “images/22.png”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “pagePath”: “pages/logs/logs”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “text”: “日志”
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             }, {
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “selectedIconPath”: “images/331.png”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “iconPath”: “images/33.png”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “pagePath”: “pages/test/test”,
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               “text”: “开心测试”
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             }]
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
           },
        
        
       
       
     
     
1

解释一下对应的属性信息

tabBar 指底部的导航配置属性

color 未选择时底部导航文字的颜色

selectedColor 选择时底部导航文字的颜色

borderStyle 底部导航边框的样色（注意这里如果没有写入样式会导致导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时图标路径

iconPath 未选择时图标路径

pagePath 页面访问地址

text 导航图标下方文字

如果要改变更详细的样式请参看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

更多微信小程序教程请扫描二维码关注：H5开发者社区

好了，保存编译就可以看到上面的效果了。

$(".MathJax").remove();

(function(){ var btnReadmore =

("#btn-readmore");        if(btnReadmore.length>0){            var winH =

$("#btn-readmore"); if(btnReadmore.length>0){ var winH =$ (window).height(); var articleBox =

("div.article_content");            var artH = articleBox.height();            if(artH > winH*2){                articleBox.css({                    'height':winH*2+'px',                    'overflow':'hidden'                })                btnReadmore.click(function(){                    articleBox.removeAttr("style");

$("div.article_content"); var artH = articleBox.height(); if(artH > winH*2){ articleBox.css({ 'height':winH*2+'px', 'overflow':'hidden' }) btnReadmore.click(function(){ articleBox.removeAttr("style");$ (this).parent().remove(); }) }else{ btnReadmore.parent().remove(); } } })()

    <div class="t0 clearfix">
                                            <a href="https://blog.csdn.net/qq_38815953/article/details/81273380" target="_blank" data-track-click="{&quot;mod&quot;:&quot;popu_642&quot;,&quot;con&quot;: &quot;,https://blog.csdn.net/qq_38815953/article/details/81273380,&quot;}">
                                                <div class="text-content">
                                                    <h4><em>微信</em>小<em>程序</em>自定义<em>底部导航</em></h4>
                                                    <div class="description">
1
2
3
4
5

<view class=’footer’>
<view class=’footer_list’ wx:for="{{listInfo}}&qu…

    <form id="commentform">
        <input type="hidden" id="comment_replyId">
        <textarea class="comment-content" name="comment_content" id="comment_content" placeholder="想对作者说点什么"></textarea>
        <div class="opt-box"> <!-- d-flex -->
            <div id="ubbtools" class="add_code">
                <a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
            </div>
            <input type="hidden" id="comment_replyId" name="comment_replyId">
            <input type="hidden" id="comment_userId" name="comment_userId" value="">
            <input type="hidden" id="commentId" name="commentId" value="">
            <div style="display: none;" class="csdn-tracking-statistics tracking-click" data-mod="popu_384"><a href="#" target="_blank" class="comment_area_btn">发表评论</a></div>
            <div class="dropdown" id="myDrap">
                <a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <div class="txt-selected text-truncate">添加代码片</div>
                <svg class="icon d-block" aria-hidden="true">
                    <use xlink:href="#csdnc-triangledown"></use>
                </svg>
                </a>
                <ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
                    <li><a data-code="html">HTML/XML</a></li>
                    <li><a data-code="objc">objective-c</a></li>
                    <li><a data-code="ruby">Ruby</a></li>
                    <li><a data-code="php">PHP</a></li>
                    <li><a data-code="csharp">C</a></li>
                    <li><a data-code="cpp">C++</a></li>
                    <li><a data-code="javascript">JavaScript</a></li>
                    <li><a data-code="python">Python</a></li>
                    <li><a data-code="java">Java</a></li>
                    <li><a data-code="css">CSS</a></li>
                    <li><a data-code="sql">SQL</a></li>
                    <li><a data-code="plain">其它</a></li>
                </ul>
            </div>  
            <div class="right-box">
                <span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
                <input type="submit" class="btn btn-sm btn-red btn-comment" value="发表评论">
            </div>
        </div>
    </form>
</div>
        <div class="comment-list-container">
    <a id="comments"></a>
    <div class="comment-list-box" style="max-height: 132px;"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="7711876" data-replyname="Bright2017">        <a target="_blank" href="https://my.csdn.net/Bright2017"><img src="https://avatar.csdn.net/1/9/9/3_bright2017.jpg" alt="Bright2017" class="avatar"></a>          <div class="right-box ">            <div class="info-box">              <a target="_blank" href="https://my.csdn.net/Bright2017"><span class="name ">Bright2017：</span></a>              <span class="comment">说的很清楚，已转载。</span><span class="date">(03-19 22:27</span><span class="floor-num">#6楼)</span><span class="opt-box"><a class="btn btn-link-blue btn-report" data-type="report">举报</a><a class="btn btn-link-blue btn-reply" data-type="reply">回复</a></span></div>          </div>        </li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="7057283" data-replyname="jiadabin">        <a target="_blank" href="https://my.csdn.net/jiadabin"><img src="https://avatar.csdn.net/7/D/8/3_jiadabin.jpg" alt="jiadabin" class="avatar"></a>          <div class="right-box ">            <div class="info-box">              <a target="_blank" href="https://my.csdn.net/jiadabin"><span class="name ">贾大兵：</span></a>              <span class="comment">问一下阿里郎怎么注册？</span><span class="date">(08-02 20:45</span><span class="floor-num">#5楼)</span><span class="opt-box"><a class="btn btn-link-blue btn-read-reply" data-type="readreply">查看回复(1)</a><a class="btn btn-link-blue btn-report" data-type="report">举报</a><a class="btn btn-link-blue btn-reply" data-type="reply">回复</a></span></div>          </div>        </li><li class="replay-box"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="7142353" data-replyname="u012118993">        <a target="_blank" href="https://my.csdn.net/u012118993"><img src="https://avatar.csdn.net/5/2/B/3_u012118993.jpg" alt="u012118993" class="avatar"></a>          <div class="right-box reply-box">            <div class="info-box">              <a target="_blank" href="https://my.csdn.net/u012118993"><span class="name mr-8">我不是法海</span></a>回复  <span class="name">贾大兵：</span>              <span class="comment">你直接 百度搜 阿里巴巴字体图标 就可以了。或者访问官网http://www.iconfont.cn/home/index  我用的新浪微博账号登录的</span><span class="date">(08-30 15:54</span>)<span class="opt-box"><a class="btn btn-link-blue btn-report" data-type="report">举报</a><a class="btn btn-link-blue btn-reply" data-type="reply">回复</a></span></div>          </div>        </li></ul></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="7057276" data-replyname="jiadabin">        <a target="_blank" href="https://my.csdn.net/jiadabin"><img src="https://avatar.csdn.net/7/D/8/3_jiadabin.jpg" alt="jiadabin" class="avatar"></a>          <div class="right-box ">            <div class="info-box">              <a target="_blank" href="https://my.csdn.net/jiadabin"><span class="name ">贾大兵：</span></a>              <span class="comment">感谢，非常好的博文已经转载！</span><span class="date">(08-02 20:42</span><span class="floor-num">#4楼)</span><span class="opt-box"><a class="btn btn-link-blue btn-report" data-type="report">举报</a><a class="btn btn-link-blue btn-reply" data-type="reply">回复</a></span></div>          </div>        </li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="6838452" data-replyname="diyangxia">        <a target="_blank" href="https://my.csdn.net/diyangxia"><img src="https://avatar.csdn.net/E/C/4/3_diyangxia.jpg" alt="diyangxia" class="avatar"></a>          <div class="right-box ">            <div class="info-box">              <a target="_blank" href="https://my.csdn.net/diyangxia"><span class="name ">xun-ming：</span></a>              <span class="comment">感谢分享！！！</span><span class="date">(05-16 20:41</span><span class="floor-num">#3楼)</span><span class="opt-box"><a class="btn btn-link-blue btn-report" data-type="report">举报</a><a class="btn btn-link-blue btn-reply" data-type="reply">回复</a></span></div>          </div>        </li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="6586059" data-replyname="u012118993">        <a target="_blank" href="https://my.csdn.net/u012118993"><img src="https://avatar.csdn.net/5/2/B/3_u012118993.jpg" alt="u012118993" class="avatar"></a>          <div class="right-box ">            <div class="info-box">              <a target="_blank" href="https://my.csdn.net/u012118993"><span class="name ">我不是法海：</span></a>              <span class="comment">不管是APP还是手机版页面，底部栏出现2层的比较少吧，建议你还是做成一栏的</span><span class="date">(02-06 11:31</span><span class="floor-num">#2楼)</span><span class="opt-box"><a class="btn btn-link-blue btn-report" data-type="report">举报</a><a class="btn btn-link-blue btn-reply" data-type="reply">回复</a></span></div>          </div>        </li></ul></div>
    <div id="commentPage" class="pagination-box d-none" style="display: block;"><div id="Paging_0032546122804921085" class="ui-paging-container"><ul><li class="js-page-first js-page-action ui-pager ui-pager-disabled"></li><li class="js-page-prev js-page-action ui-pager ui-pager-disabled">上一页</li><li data-page="1" class="ui-pager focus">1</li><li data-page="2" class="ui-pager">2</li><li class="js-page-next js-page-action ui-pager">下一页</li><li class="js-page-last js-page-action ui-pager"></li></ul></div></div>
    <div class="opt-box text-center">
        <button class="btn btn-sm btn-link-blue" id="btnMoreComment">查看 7 条热评</button>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

                <div class="recommend-item-box type_blog clearfix" data-track-click="{&quot;mod&quot;:&quot;popu_387&quot;,&quot;con&quot;:&quot;,https://blog.csdn.net/lecepin/article/details/54380814,BlogCommendFromBaidu_9,index_2&quot;}" data-flg="true">
    <a href="https://blog.csdn.net/lecepin/article/details/54380814" target="_blank" title="<em>微信</em>小<em>程序</em>入门四: 导航栏样式、tabBar导航栏">
        <div class="content" style="width: 842px;">
            <h4 class="text-truncate oneline" style="width: 717px;">
                    <em>微信</em>小<em>程序</em>入门四: 导航栏样式、tabBar导航栏             </h4>
            <div class="info-box d-flex align-content-center">
                <p class="avatar">
                        <img src="https://avatar.csdn.net/7/3/2/3_lecepin.jpg" alt="lecepin" class="avatar-pic">
                        <span class="namebox" style="left: -19px;">
                            <span class="name">lecepin</span>
                            <span class="triangle"></span>
                        </span>
                </p>
                <p class="date-and-readNum">
                    <span class="date hover-show">01-12</span>
                    <span class="read-num hover-hide">
                        <svg class="icon csdnc-yuedushu" aria-hidden="true">
                            <use xlink:href="#csdnc-yuedushu"></use>
                        </svg>
                        7.8万</span>
                    </p>
                </div>
                <p class="content oneline" style="width: 842px;">
                        实例内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

导航栏样式设置
tabBar导航栏
实例一：导航栏样式设置小程序的导航栏样式在app.json中定义。这里设置导航，背景黑色，文字白色，文字内容测试小程序app.json内容：{
“pa…

        <div class="recommend-loading-box">
            <img src="https://csdnimg.cn/release/phoenix/images/feedLoading.gif">
        </div>
        <div class="recommend-end-box">
            <p class="text-center">没有更多推荐了，<a href="https://blog.csdn.net/" class="c-blue c-blue-hover c-blue-focus">返回首页</a></p>
        </div>
    </div>
</main>
1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/110907?site

微信 设置底部导航栏_微信小程序底部导航栏

微信小程序设置底部导航栏目方法

1. 图标准备

2. 更改配置文件

微信小程序-自定义底部导航

微信小程序：设置底部导航栏目

你不知道区块链开发都是这样练成的？

微信小程序滚动Tab选项卡：左右可滑动切换

微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

微信小程序之底部导航栏——tabBar

微信小程序把玩(三)tabBar底部导航

开发微信小程序（3）-全局配置app.json及底部导航栏实现

微信小程序底部选项卡/导航栏实现方法

微信设置底部导航栏_微信小程序底部导航栏