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
猜你喜欢
- 列表列表是Python中最具灵活性的有序集合对象类型。与字符串不同的是,列表可以包含任何类型的对象:数字、字符串甚至其他列表。列表是可变对象
- 今天使用import pandasusers = pandas.read_csv("H:\python\data analysis
- 使用apidoc管理RESTful风格Flask项目接口文档方法apidoc项目地址flask扩展包地址文档示例地址1.安装nodejssu
- 这里简单介绍下两种安装docker-compose的方式,第一种方式相对简单,但是由于网络问题,常常安装不上,并且经常会断开,第二种方式略微
- 在使用django的modelform的时候,修改表单,图片在form表单显示的是一个链接。显示缩略图如下第一步:from django.f
- 阅读上一篇:FrontPage2002简明教程四:网页超级链接 一、三种添加CSS的方式 在FrontPage 2002里可以通过三种方式给
- 1、plt.legendplt.legend(loc=0)#显示图例的位置,自适应方式说明:'best' :
- 简介想看看你最近一年都在干嘛?看看你平时上网是在摸鱼还是认真工作?想写年度汇报总结,但是苦于没有数据?现在,它来了。这是一个能让你了解自己的
- 本文为大家分享了解决Mysql存储引擎MyISAM常见问题的方法,供大家参考,具体内容如下一、处理MyISAM存储引擎的表损坏在使用MySQ
- 问题你想自己去实现一个新的上下文管理器,以便使用with语句。解决方案实现一个新的上下文管理器的最简单的方法就是使用 contexlib 模
- 本文总结了python画图中使用各种特殊符号方式一、问题背景在论文中,如何使用特殊符号进行表示?这里给出效果图和代码完整代码:from ma
- 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera
- 以下方案皆为引用,仅供参考。方案一:1.先声明一下,这种解决方法适用于任何版本的永久破解启动不了的情况(包括:2019版本的)2.下面直接切
- 近来在训练检测网络的时候会出现loss为nan的情况,需要中断重新训练,会很麻烦。因而选择使用PyTorch提供的梯度裁剪库来对模型训练过程
- 故障现象 Oracle Database 11g 数据库普通用户登录时提示 ORA-28002: the password will exp
- 前言网易云音乐这款音乐APP本人比较喜欢,用户量也比较大,而网易云音乐之所以用户众多和它的歌曲评论功能密不可分,很多歌曲的评论非常有意思,其
- 最近发现自己的博客打开很慢,通过ie浏览器打开速度还可以,使用任何第三方浏览器打开都超级慢,以为是HTML代码元素导致,一番比对后没有发现不
- 1.折线图 plt.plot()常用的一些参数:颜色(color):‘c’ 青红(cyan)&
- 常用方法浅拷贝copya = {"ilpy1": {"company": "aaa&quo
- 在日常工作中;经常会遇到这样的需求:Oracle 数据表跟文本或者文件格式进行交互;即将指定文件内容导入对应的 Oracle 数据表中;或者