当前位置: 首页 > news >正文

IT廉连看——Uniapp——配置文件pages

IT廉连看——Uniapp——配置文件pages

[IT廉连看]  

本堂课主要为大家介绍pages.json这个配置文件

一、打开官网查看pages.json可以配置哪些属性。

下面边写边讲解

新建一个home页面理解一下这句话。

以下一些页面的通用配置

通用设置里我们可以对导航栏和状态栏进行一些设置

接下来我们更改一下导航栏颜色:

"navigationBarBackgroundColor": "#282828",                                               alt+鼠标左键可选择颜色

下一步对标题文字进行设置:

"navigationBarTitleText": "IT",

未更改成功,这是为什么?

接下来更改导航栏文字颜色:

导航栏更改颜色,如今官方只支持修改两种颜色,一种是黑色一种是白色。

二、path和style

path,页面路由

style:其实我们已经使用过了

在这里我们设置的是通用的窗口样式。

如果我们想要每个页面都有不同的样式,那么就根据它的优先级,把这些代码再写入指定的页面。

三、tabbar

1、打开官网查看tabbar介绍

代码示例:

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "组件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
}

每个配置项代表什么:

"color": "#7A7E83",                                                             color:颜色"selectedColor": "#3cc51f",                                                 selectedColor:选中时的颜色"borderStyle": "black",                                                     borderStyle:上边框颜色"backgroundColor": "#ffffff",                                               backgroundColor:背景颜色

当我们把页面设置为tabbar页面,我们需要把页面添加近list,list可添加2-5个页面。我们的tabbar需要一些改动。

"list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png",                      图片"selectedIconPath": "static/image/icon_component_HL.png",           选中时的图标"text": "组件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
    我们需要更改页面路径

2、condition

"condition": { //模式配置,仅开发期间生效"current": 0, //当前激活的模式(list 的索引项)"list": [{"name": "swiper", //模式名称"path": "pages/component/swiper/swiper", //启动页面,必选"query": "interval=4000&autoplay=false" //启动参数,在页面的onLoad函数里面得到。},{"name": "test","path": "pages/component/switch/switch"}]
}

http://www.lryc.cn/news/309117.html

相关文章:

  • 服务器上部署WEb服务方法
  • 设计模式:模版模式
  • pikachu之特殊注入之搜索型注入、xx型注入、insert/update注入、delete注入、宽字节注入
  • docker构建hyperf环境
  • WPF常用mvvm开源框架介绍 vue的mvvm设计模式鼻祖
  • HTML <script>元素的10个属性
  • NX二次开发:ListingWindow窗口的应用
  • 设计模式-结构型模式-外观模式
  • C++学习第四天(类与对象下)
  • 【AI Agent系列】【MetaGPT多智能体学习】0. 环境准备 - 升级MetaGPT 0.7.2版本及遇到的坑
  • python自动化管理和zabbix监控网络设备(无线AC控制瘦ap配置部分)
  • XSS中级漏洞(靶场)
  • etcd java 客户端jetcd库踩坑日志
  • <网络安全>《61 微课堂<第1课 南北向流量是什么?>》
  • Day12-【Java SE进阶】JDK8新特性:Lambda表达式、方法引用、常见算法、正则表达式、异常
  • go mod中如何解决 xxx/yyy/lib@v1.1.0: unrecognized import path
  • 比较Python和Rust的内存管理机制
  • Linux系统——Shell脚本——一键安装LNMP
  • 算法复习之二分【备战蓝桥杯】
  • 如何做代币分析:以 SHIB 币为例
  • Springboot+vue的考勤管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。
  • https://htmlunit.sourceforge.io/
  • 回文链表(leetcode)
  • 大语言模型(LLM)技术名词表(一)
  • C++ 快速排序快速选择
  • 雅马哈伺服器TS-S系列说明具体详情内容可参看PDF目录内容
  • SpringBoot底层原理
  • 【golang】25、图片操作
  • kswapd0挖矿病毒攻击记录
  • 如何使用 takeUntil RxJS 操作符来声明性地管理订阅