admin管理员组文章数量:1583042
引入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": "个人中心"
}
}
],
保存运行
版权声明:本文标题:uniapp多端百度网盘(1)整体框架搭建 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727902325a1137034.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论