德保罗 發表於 2019-9-8 02:17:00

uni-app底部导航栏

<p>uni-app 的tabbar配置参数地址：</p>
<p>https://uniapp.dcloud.io/collocation/pages?id=tabbar</p>
<p>&nbsp;</p>
<p>tabBar的配置跟globalStyle同级</p>
<p>1.在pages新建几个页面</p>
<p>2.配置tabBar,</p>
<p>color字体颜色</p>
<p>selectedColor选中的字体颜色</p>
<p>backgroundColor底部背景颜色</p>
<p>borderStyle底部的border，只能是“black” 或者 "white"</p>
<p>list&nbsp; , list是一个对象，包含以下这些选项</p>
<p>pagePath: 页面路径</p>
<p>text ：tab的文字</p>
<p>iconPath : 没选中的图标路径</p>
<p>selectedIconPath ：选择后的图标路径。</p>
<p>例子：</p>
<p>page.json的tabBar配置</p>
<div class="cnblogs_code">
<pre>    "tabBar"<span style="color: rgba(0, 0, 0, 1)">:{
      </span>"color":"#333"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"selectedColor":"deepskyblue"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"backgroundColor":"#eee"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"borderStyle":"black"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"list"<span style="color: rgba(0, 0, 0, 1)">:[
            {
                </span>"pagePath":"pages/index/index"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"text":"首页"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"iconPath":"./static/tabbar/index.png"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"selectedIconPath":"static/tabbar/indexed.png"<span style="color: rgba(0, 0, 0, 1)">
            },
            {
                </span>"pagePath":"pages/news/news"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"text":"动态"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"iconPath":"static/tabbar/news.png"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"selectedIconPath":"static/tabbar/newsed.png"<span style="color: rgba(0, 0, 0, 1)">
            },
            {
                </span>"pagePath":"pages/paper/paper"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"text":"小纸条"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"iconPath":"static/tabbar/paper.png"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"selectedIconPath":"static/tabbar/papered.png"<span style="color: rgba(0, 0, 0, 1)">
            },
            {
                </span>"pagePath":"pages/my/my"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"text":"我的"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"iconPath":"static/tabbar/my.png"<span style="color: rgba(0, 0, 0, 1)">,
                </span>"selectedIconPath":"static/tabbar/myed.png"<span style="color: rgba(0, 0, 0, 1)">
            }
      ]
    }</span></pre>
</div>
<p>&nbsp;</p>
<p>3.图标制作方法：</p>
<p>（1）打开阿里巴巴图标库，登录，找到对应的图标</p>
<p>（2）添加到项目，选择颜色和大小，颜色分别是选中时和未选中时的颜色，大小是80，选择png下载</p>
<p><img src="https://img2018.cnblogs.com/blog/1563435/201909/1563435-20190908021527864-1831706138.png"></p>
<p>4.效果：</p>
<p><img src="https://img2018.cnblogs.com/blog/1563435/201909/1563435-20190908021758823-1991333413.png"></p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/luguankun/p/11484166.html
頁: [1]
查看完整版本: uni-app底部导航栏