pages数组
- uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值有
path
:配置页面路径和style
:配置页面窗口表现 - pages参考
path
style
- 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
- 页面中配置项会覆盖
globalStyle
中相同的配置项 - style参考
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index"//uni-app的图标 页面生命周期onLoad onShow
},
{
"path":"pages/navigator/navigator" //导航跳转学习
},
{//首页放第一个
"path": "pages/message/message",//图片的上传和预览 条件编译
"style":{
"navigationBarTitleText":"信息" ,//页面样式会覆盖全局样式
"navigationBarBackgroundColor":"#007AFF",
"h5":{
"pullToRefresh":{
"color":"#8F8F94"
}
}
}
},
{
"path":"pages/list/list", //开启用户下拉刷新动作,关闭,监听,按钮刷新 get请求
"style":{
"enablePullDownRefresh":true,
"onReachBottomDistance":200 //页面下拉触底,加载下一页的数据
}
},
{
"path":"pages/home/home"//数据绑定的学习 v-bind动态绑定属性 v-for的使用 事件
},
{
"path":"pages/uni-style/uni-style"//样式学习页面
},
{
"path": "pages/contaxt/contact"//简单测试
},
{
"path": "pages/detail/detail"//text view image 按钮的学习
}
]
globalStyle
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "绿帽子",
"navigationBarBackgroundColor": "#09F709", //导航栏
"backgroundColor": "#EFFEEF", //导航栏字体
"enablePullDownRefresh":true ,//下拉
"backgroundTextStyle":"light"
}
condition
- 启动模式配置,仅开发期间生效,用于模拟直达页面的场景
- 有
list
:当前激活的模式,list节点的索引值和current
:启动模式列表 - condition参考
"condition" : { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "详情页", //模式名称
"path": "pages/detail/detail", //启动页面,必选
"query": "id=80" //启动参数,在页面的onLoad函数里面得到
}
]
}
tabBar
- 如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页
- tabBar 中的 list 是一个数组,只能配置最少2个最多5个 tab,tab 按数组的顺序排序。
- tabBar参考
"tabBar": {
"color":"#000000",
"selectedColor":"#ff3333",
"backgroundColor":"#ccffcc",
"borderStyle":"black",//tabbar的边框颜色
"position":"bottom",//top只在小程序里面起作用
"list":[
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text":"信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text":"我们",
"pagePath":"pages/contaxt/contact",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}