2020-11-16 uni-app tabbar底部导航配置

先增加三个页面

image.png

修改page.json文件，增加pages tabBar

{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-ui基础项目"
        }
    }, {
        "path": "pages/owner/owner",
        "style": {
            "navigationBarTitleText": "",
            "enablePullDownRefresh": false
        }

    }, {
        "path": "pages/mine/mine",
        "style": {
            "navigationBarTitleText": "",
            "enablePullDownRefresh": false
        }

    }],
    "tabBar": {
        "list": [{
                "text": "主页",
                "pagePath": "pages/index/index",
            },
            {
                "text": "车主",
                "pagePath": "pages/owner/owner"
            },
            {
                "text": "我的",
                "pagePath": "pages/mine/mine"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#007AFF",
        "backgroundColor": "#FFFFFF"
    }
}

tabbar的配置文档

弄好了应该有下面的效果

image.png

给tabbar加上几个图标

下面是图标格式要求，我这里通过在线的css加上color属性and截图工具拿到我想要的不同颜色图标

image.png

获取icon

后面这些是UI同学的工作了
我们先在iconfont找几个图标，用github账号去登录就行了，没有就自己建一个 ，

image.png

利用在线的字体图标，写个html预览，然后截屏

image.png

image.png

用PS切片处理，切81*81像素

image.png

导出切片【文件】【储存为web有用格式】，记得选用户切片

image.png

图标做好了

image.png

先将导出的图片放到static目录下，然后配置iconPath，selectedIconPath字段,hbuilder有只能提示，点赞

image.png

图标就都出来了 还有高亮效果

image.png