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中进行配置,前者就是导航栏,进入到小程序就会显示,后者是背景窗口,就是平常下拉时显示的区域。

uni-app入门页面布局之window和tabbar详解

简单介绍一下window中常用的配置项:

{
 "window": {
   "navigationBarBackgroundColor": "#3BF312",
   "navigationBarTextStyle": "white",
   "navigationBarTitleText": "uni-app入门",
   "backgroundColor":"#ffffff",
   "backgroundTextStyle": "dark",
   "enablePullDownRefresh":true
 }
}

     navigationBarBackgroundColor:导航状态栏的背景颜色,此处设置为绿色;
     navigationBarTextStyle:导航状态栏中文字的颜色;
     navigationBarTitleText:导航状态栏输入的文字,此处输入uni-app入门;
     backgroundColor:下拉时显示的背景窗口的背景色,一般都是白色;
     backgroundTextStyle:下拉时显示的三个点的颜色;
     enablePullDownRefresh:是否支持下拉刷新;
     上述配置效果如下:

uni-app入门页面布局之window和tabbar详解

2.tabbar

    tabbar就是小程序中最下面的部分,常用的属性如下:

uni-app入门页面布局之window和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

标签:uni-app,页面布局,window,tabbar
0
投稿

猜你喜欢

  • python机器基础逻辑回归与非监督学习

    2023-03-17 03:59:05
  • 列举Python中吸引人的一些特性

    2023-12-17 03:25:57
  • Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答

    2023-05-18 19:52:33
  • win7下MySql 5.7安装配置方法图文教程

    2024-01-20 21:04:12
  • 使用python求解二次规划的问题

    2022-05-15 21:40:59
  • mysql unique key在查询中的使用与相关问题

    2024-01-18 20:00:54
  • PHP常用字符串函数用法实例总结

    2024-05-11 10:01:28
  •  SQL 中 CASE 表达式的使用方式

    2024-01-23 14:18:47
  • Python调用Jar包的两种方式小结

    2023-07-26 06:29:12
  • 开发人员一定要加入收藏夹的网站 推荐

    2023-09-14 23:24:43
  • django框架模型层功能、组成与用法分析

    2021-10-21 22:00:28
  • Python基础之进程详解

    2023-07-10 23:58:43
  • 浅析Oracle中sys、system和Scott用户下的数据库连接问题

    2023-07-02 15:14:06
  • python深度学习tensorflow1.0参数初始化initializer

    2022-11-01 05:00:12
  • django框架两个使用模板实例

    2023-11-01 20:05:18
  • pycharm快捷键汇总

    2022-12-30 22:43:40
  • 实例讲解MySQL中乐观锁和悲观锁

    2024-01-19 00:46:35
  • 详解git commit --amend 用法

    2023-03-21 00:29:52
  • PHP类的特性实例分析

    2024-05-03 15:49:46
  • 使用Python实现控制摄像头的方法详解

    2023-01-15 14:38:12
  • asp之家 网络编程 m.aspxhome.com