查看: 88|回覆: 0

uni-app底部导航栏

[複製鏈接]

2

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2010-2-16
發表於 2019-9-8 02:17:00 | 顯示全部樓層 |閲讀模式

uni-app 的tabbar配置参数地址:

https://uniapp.dcloud.io/collocation/pages?id=tabbar

 

tabBar的配置跟globalStyle同级

1.在pages新建几个页面

2.配置tabBar,

color字体颜色

selectedColor选中的字体颜色

backgroundColor底部背景颜色

borderStyle底部的border,只能是“black” 或者 "white"

list  , list是一个对象,包含以下这些选项

pagePath: 页面路径

text :tab的文字

iconPath : 没选中的图标路径

selectedIconPath :选择后的图标路径。

例子:

page.json的tabBar配置

    "tabBar":{
        "color":"#333",
        "selectedColor":"deepskyblue",
        "backgroundColor":"#eee",
        "borderStyle":"black",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"首页",
                "iconPath":"./static/tabbar/index.png",
                "selectedIconPath":"static/tabbar/indexed.png"
            },
            {
                "pagePath":"pages/news/news",
                "text":"动态",
                "iconPath":"static/tabbar/news.png",
                "selectedIconPath":"static/tabbar/newsed.png"
            },
            {
                "pagePath":"pages/paper/paper",
                "text":"小纸条",
                "iconPath":"static/tabbar/paper.png",
                "selectedIconPath":"static/tabbar/papered.png"
            },
            {
                "pagePath":"pages/my/my",
                "text":"我的",
                "iconPath":"static/tabbar/my.png",
                "selectedIconPath":"static/tabbar/myed.png"
            }
        ]
    }

 

3.图标制作方法:

(1)打开阿里巴巴图标库,登录,找到对应的图标

(2)添加到项目,选择颜色和大小,颜色分别是选中时和未选中时的颜色,大小是80,选择png下载

4.效果:

 



来源:https://www.cnblogs.com/luguankun/p/11484166.html
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部