uni-app入门页面布局之window和tabbar详解
作者:卖柴火的小伙子 时间:2024-04-08 10:53:33
前言
每个页面按照结构可以分成三部分:window page tabbar.其中window和tabbar一般比较固定,page是平常业务开展的主要载体,根据业务需求进行页面配置。下面主要讲一下window和tabbar。
1.window
window用于设置小程序的状态栏、导航条、标题、窗口背景色。每个页面可以由以下四个部分组成(最下面的tabbar单独讲述,此处不体现)。其中navigationBar和backgroud都可以在window中进行配置,前者就是导航栏,进入到小程序就会显示,后者是背景窗口,就是平常下拉时显示的区域。
简单介绍一下window中常用的配置项:
{
"window": {
"navigationBarBackgroundColor": "#3BF312",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app入门",
"backgroundColor":"#ffffff",
"backgroundTextStyle": "dark",
"enablePullDownRefresh":true
}
}
navigationBarBackgroundColor:导航状态栏的背景颜色,此处设置为绿色;
navigationBarTextStyle:导航状态栏中文字的颜色;
navigationBarTitleText:导航状态栏输入的文字,此处输入uni-app入门;
backgroundColor:下拉时显示的背景窗口的背景色,一般都是白色;
backgroundTextStyle:下拉时显示的三个点的颜色;
enablePullDownRefresh:是否支持下拉刷新;
上述配置效果如下:
2.tabbar
tabbar就是小程序中最下面的部分,常用的属性如下:
简单介绍一下tabbar的常用配置项:
{
"tabBar": {
"color":"#000000",
"selectedColor":"##F30E0E",
"position":"bottom",
"backgroundColor": "#ffffff",
"borderStyle":"black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "消息"
},
{
"pagePath": "pages/mine/mine",
"text": "我的"
}]
}
}
backgroundColor:tabbar背景颜色;
selectedIconPath:选中时的图片路径;
selectedColor:选选中时的颜色;
borderStyle:tabbar 上边框的颜色, 仅支持 black / white;
iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片;
color:tabbar的颜色;
3.全局配置与局部页面配置
uniapp中每个项目中都会有app.json配置文件,定义的配置项对全局生效。项目中每个页面都在pages文件夹下以单独文件夹的形式存在,每个页面都一个对应的json文件,定义的配置项是对所在页面生效。当全局配置app.json与页面配置json中配置项相同时,会优先按照页面配置信息进行生效。
来源:https://blog.csdn.net/weixin_43401380/article/details/127956400
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python机器基础逻辑回归与非监督学习
![](https://img.aspxhome.com/file/2023/7/131697_0s.png)
列举Python中吸引人的一些特性
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
![](https://img.aspxhome.com/file/2023/1/82761_0s.png)
win7下MySql 5.7安装配置方法图文教程
![](https://img.aspxhome.com/file/2023/9/128019_0s.jpg)
使用python求解二次规划的问题
![](https://img.aspxhome.com/file/2023/2/134972_0s.jpg)
mysql unique key在查询中的使用与相关问题
PHP常用字符串函数用法实例总结
SQL 中 CASE 表达式的使用方式
![](https://img.aspxhome.com/file/2023/2/112852_0s.png)
Python调用Jar包的两种方式小结
开发人员一定要加入收藏夹的网站 推荐
django框架模型层功能、组成与用法分析
Python基础之进程详解
![](https://img.aspxhome.com/file/2023/9/103149_0s.jpg)
浅析Oracle中sys、system和Scott用户下的数据库连接问题
python深度学习tensorflow1.0参数初始化initializer
django框架两个使用模板实例
![](https://img.aspxhome.com/file/2023/9/95709_0s.png)
pycharm快捷键汇总
![](https://img.aspxhome.com/file/2023/7/79417_0s.jpg)
实例讲解MySQL中乐观锁和悲观锁
详解git commit --amend 用法
![](https://img.aspxhome.com/file/2023/1/117541_0s.jpg)