uniapp pages.json 简单应用
目录
pages.json 配置页面样式
pages
代码演示 style更多样式
运行效果
globalStyle
代码演示 更多样式说明
运行效果
tabBar
代码演示 官网详细介绍 图片图标下载阿里图库
运行效果
pages.json 配置页面样式
pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
pages
uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| path | String | 配置页面路径 | |
| style | Object | 配置页面窗口表现，配置项参考下方 pageStyle |
Tips：
- pages节点的第一项为应用入口页（即首页）
- 应用中新增/减少页面，都需要对 pages 数组进行修改
- 文件名不需要写后缀，框架会自动寻找路径下的页面资源
代码演示 style更多样式
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {// 导航标题内容"navigationBarTitleText": "首页",//导航背景颜色"navigationBarBackgroundColor": "#ff5566",//导航标题颜色 仅支持白 黑"navigationBarTextStyle": "white",//是否开启下拉刷新"enablePullDownRefresh": true}},{"path" : "pages/login/login","style" : {"enablePullDownRefresh": false}}]运行效果
globalStyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。
全局通用 如果局部有样式按局部显示
代码演示 更多样式说明
"globalStyle": {// 导航栏标题颜色"navigationBarTextStyle": "black",//导航栏标题内容"navigationBarTitleText": "default",//导航栏背景颜色"navigationBarBackgroundColor": "#F8F8F8",//导航栏背景颜色"backgroundColor": "#F8F8F8"},运行效果
tabBar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
代码演示 官网详细介绍 图片图标下载阿里图库
"tabBar": {//背景颜色"backgroundColor": "#F8F8F8",//tab文字颜色"color": "#d8d8d8",//tab选中文字颜色"selectedColor": "#444","list": [{"text": "首页",//页面路径 该路径与pages一致 要不然展示不出来"pagePath": "pages/index/index",//默认展示图片"iconPath": "./static/icon/index.png",//选中展示图片"selectedIconPath": "./static/icon/indexSel.png"},{"text": "个人","pagePath": "pages/homepage/homepage","iconPath": "./static/icon/person.png","selectedIconPath": "./static/icon/personSel.png"}]},运行效果
uniapp pages.json 简单应用相关推荐
- uniapp的目录结构反思与整理 app.vue【base】pages.json【配置】main.json【框架入口文件】
App.vue 作用是 全局样式+全局的生命周期 相当于PHP里面的BaseControlller文件 [Base] pages.json作用是 配置路由+导航条+选项卡+tabbar ...
- uni-app的pages.json的各种配置
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径.窗口样式.原生的导航栏.底部的原生tabbar 等. 它类似微信小程序中app.json的页面管理部分.注意定位权限 ...
- uniapp微信小程序系列（2）pages.json实用配置详解
本篇主要介绍其中几个实用的配置: 1. 配置应用级别样式.tabBar样式 2. 配置前端页面路由.分包路由 3. 配置easycom全局组件(组件无需import引入直接使用) 一. 配置应用级别样 ...
- UniApp基础：简单入门
备注:好多东西都不需要说,直接看官方文档 基本配置 项目目录 开发规范 为了实现多端兼容,综合考虑编译速度.运行性能等因素,uni-app 约定了如下开发规范: 页面文件遵循 Vue 单文件组件 (S ...
- android string数组转json_移动端开发基础【20】pages.json的配置项pages
uni-app项目是通过pages节点配置应用由哪些页面组成,pages节点接收一个数组,数组每个项都是一个对象,其属性值如下:(1) 属性:path类型:String描述:配置页面路径(2) 属性: ...
- uni - app 的 pages.json 文件页面配置与全局配置
1. 新建页面 pages 文件上右键新建页面 创建同名目录,注册 pages.json ,使用 scss 页面 页面新建完成: 且 pages.json 文件中已经注册,这个注册和 原生微信小程序 ...
- pages.json
pages.json概述 pages.json 文件用来对uni-app进行全局配置,决定页面文件的路径.窗口表现.设置多tab页(底部导航)等. pages.json 配置内容 (1)globalS ...
- 用uni-app写一个简单的豆瓣电影微信小程序
如题,这个项目是用 uni-app 写的,只有一个列表页,没有详情页. 截图 首页 选择标签 搜索列表 封装api ./api/api // 定义基本URL const BASE_URL = 'htt ...
- XML与JSON简单了解
XML与JSON,Ajax简单了解 XML与JSON Ajax请求 XML与JSON XML是一种可扩展性标记语言,被设计用来传输和储存数据. 作用: 1.程序之间的数据传输工具 2.配置文件 3.作 ...
最新文章
- C++/C++11中std::list双向链表的使用
- freemarker写select组件报错总结（六）
- python防反编译_Python - 浅谈Python的编译与反编译
- Redis-09Redis的基础事务
- 子元素的margin-top影响父元素原因和解决办法
- 下一代Windows系统，Win11来了
- sublime text3 注册码，亲测可用
- linux密码暴力破解之SHA-512破解
- 计算机的硬件技能,计算机的最基础——软硬件
- java编写一个整钱换零_Java编写钱币转换为大写程序
- 我从AI For Everyone学到的十个重要AI 概念
- 腾讯开源物联网操作系统 TencentOS tiny，最小体积 1.8KB！
- anaconda同时集成Python2 和 Python3
- 递归问题学习二之卡牌组合问题
- TCP为什么是3次握手而不是2次或者4次或者更多次？
- 笑哭了！日本网友求助如何卸载360浏览器，过程堪比“ 拆弹 ”.....
- 企业债拟引入大数据强化信用约束
- 乐高无限自己地图无法服务器,乐高无限地图制作攻略 建造的小细节不要错过...
- Node.js 有难度的面试题，你能答对几个？
- 规范自己的JavaScript书写 – Dojo Javascript 编程规范