微信设置底部导航栏

最新推荐文章于 2024-08-21 15:29:23 发布

羽林宁

最新推荐文章于 2024-08-21 15:29:23 发布

阅读量1.9w

点赞数 1

文章标签：小程序

转

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

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”: “开心测试”
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             }]
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
           },

解释一下对应的属性信息

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 = $("#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"); $("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">

&lt;view class=’footer’&gt;
&lt;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>

                <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;">
                        实例内容

导航栏样式设置
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>