引入uni.css
在index.vue 添加如下代码引入uni.css
@import url("@/common/uni.css");
编写全局共有样式，在common文件夹中添加common.css，编写如下样式代码
/* 背景色主色调 */ .bg-main{ background-color: #009CFF!important; } .bg-main-hover{ background-color: #51BBFF!important; } .bg-main-disabled{ background-color: #51BBFF!important; } /* 文字主色调 */ .text-main{ color: #009CFF!important; } .text-main-hover{ color: #51BBFF!important; } .border-main{ border-color: #51BBFF!important; }
引入free样式库
引入图标库与底部导航栏图标文件
page.json添加底部导航栏
"tabBar":{ "backgroundColor":"#FFFFFF", "borderStyle":"black", "color":"#BDBDBD", "selectedColor":"#009CFF", "list":[{ "iconPath":"static/tabbar/index.png", "selectedIconPath":"static/tabbar/index-selected.png", "pagePath":"pages/index/index", "text":"首页" },{ "iconPath":"static/tabbar/list.png", "selectedIconPath":"static/tabbar/list-selected.png", "pagePath":"pages/list/list", "text":"传输" },{ "iconPath":"static/tabbar/my.png", "selectedIconPath":"static/tabbar/my-selected.png", "pagePath":"pages/my/my", "text":"我的" }] }
添加list,my的uniapp页面
添加两个页面
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },{ "path": "pages/list/list", "style": { "navigationBarTitleText": "传输列表" } },{ "path": "pages/my/my", "style": { "navigationBarTitleText": "个人中心" } } ],
保存运行
