1、创建项目
①项目名称：自定义，【我是travel】
②vue版本：vue3
③其他默认，最后创建
2、创建页面
①展开自己刚才创建的项目
②单击选中pages文件夹 --->鼠标右键---->新建页面
③页面名称：自定义favourite、like、collect......（这里是个收藏/点赞/喜欢的类似意义的页面）
④勾选：创建同名目录
⑤选择模版：使用scss的页面
⑥勾选：在pages.json中注册
⑦最后一步：创建（其他自选或者默认）
我们用类似方法在创建一个类似"我的/个人中心"意义的页面，my、personal_center......
3、pages.json中注册tarbar ，将代码添加进去
需要添加的代码
// 底部导航tabBar
"tabBar": {
// 所有底部导航文字颜色
"color": "#8183ff",
// 所有底部导航文字选中后的颜色
"selectedColor": "#0901ff",
// 所有底部导航背景色颜色
"backgroundColor": "#fff",
// 底部导航列表
"list": [
// 第一个导航：
// text：底部导航文本，
// pagePath：底部导航链接路径，例如如果是favourte页面路径，那么点击就会跳转到我的收藏页面
// iconPath：底部导航图标，这里是uniapp默认的
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/logo.png"
},
{
"text": "我的收藏",
"pagePath": "pages/favourite/favourite",
"iconPath": "static/logo.png"
},
{
"text": "个人中心",
"pagePath": "pages/personal_center/personal_center",
"iconPath": "static/logo.png"
}
]
},完整代码
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
// 页面路径
"path": "pages/index/index",
"style": {
// 页面标题
"navigationBarTitleText": "首页"
}
},
{
// 页面路径
"path": "pages/favourite/favourite",
"style": {
// 页面标题
"navigationBarTitleText": "我的收藏"
}
},
{
// 页面路径
"path": "pages/personal_center/personal_center",
"style": {
// 页面标题
"navigationBarTitleText": "个人中心"
}
}
],
// 底部导航tabBar
"tabBar": {
// 所有底部导航文字颜色
"color": "#8183ff",
// 所有底部导航文字选中后的颜色
"selectedColor": "#0901ff",
// 所有底部导航背景色颜色
"backgroundColor": "#fff",
// 底部导航列表
"list": [
// 第一个导航：
// text：底部导航文本，
// pagePath：底部导航链接路径，例如如果是favourte页面路径，那么点击就会跳转到我的收藏页面
// iconPath：底部导航图标，这里是uniapp默认的
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/logo.png"
},
{
"text": "我的收藏",
"pagePath": "pages/favourite/favourite",
"iconPath": "static/logo.png"
},
{
"text": "个人中心",
"pagePath": "pages/personal_center/personal_center",
"iconPath": "static/logo.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}4、运行到内置浏览器
顶部菜单栏---->运行----->运行到内置浏览器------>最右边会有页面效果，预览按钮下边（如图）
（其他也可以选如果你会的话，可能需要配置或者下载，这里不过多赘述）
可以点击tabbar尝试一下，选中前的颜色，选中后的颜色，以及切换页面的效果
（也可以自己更改背景颜色以及字体颜色效果，或者自行查询其他效果哦）
