← 返回首页
uniapp的tabbar配置
发表时间:2022-07-12 18:44:21
tabbar配置

1.uniapp工程目录

一个uni-app工程,默认包含如下目录及文件:

┌─uniCloud              云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录,详见
├─platforms             存放各平台专用页面的目录,详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─wxcomponents          存放小程序组件的目录,详见
├─nativeplugins         App原生插件 详见
├─unpackage             非工程代码,一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss              这里是uni-app内置的常用样式变量 

2.应用首页

uni-app会将pages.json -> pages配置项中的第一个页面,作为当前工程的首页(启动页)。 pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。

3.pages.json示例

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "牛牛编程"
            }
        },
        {
            "path": "pages/course/course",
            "style": {
                "navigationBarTitleText": "牛牛编程"
            }
        },
        {
            "path": "pages/favorites/favorites",
            "style": {
                "navigationBarTitleText": "牛牛编程"
            }
        },
        {
            "path": "pages/center/center",
            "style": {
                "navigationBarTitleText": "牛牛编程"
            }
        }

    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#1C86EE",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {},
    "tabBar": {
        "color": "#999999",
        "selectedColor": "#219DF4",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "black",
        "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "static/tabbar/home.png",
            "selectedIconPath": "static/tabbar/homeed.png"
        }, {
            "pagePath": "pages/course/course",
            "text": "教程",
            "iconPath": "static/tabbar/course.png",
            "selectedIconPath": "static/tabbar/coursed.png"
        }, {
            "pagePath": "pages/favorites/favorites",
            "text": "收藏",
            "iconPath": "static/tabbar/favorites.png",
            "selectedIconPath": "static/tabbar/favoritesed.png"
        }, {
            "pagePath": "pages/center/center",
            "text": "我的",
            "iconPath": "static/tabbar/user.png",
            "selectedIconPath": "static/tabbar/usered.png"
        }]
    }

}