uni-app学习记录01-pages配置项

2023-07-29,,

{
// 每个页面都需要在pages里面去声明配置
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
// 每页里面的style的设置会覆盖globalStyle里面的设置
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/one/one",
"style": {
"navigationBarTitleText": "一页"
}
},
{
"path": "pages/two/two",
"style": {
"navigationBarTitleText": "二页"
}
}, {
"path": "pages/three/three",
"style": {
"navigationBarTitleText": "三页"
}
}, {
"path": "pages/four/four",
"style": {
"navigationBarTitleText": "四页"
}
}
],
// 通过配置tabBar来设置底部导航栏 最少2页最多5页
"tabBar": {
// tab 上的文字默认颜色
"color": "#7A7E83",
// selectedColor
"selectedColor": "#3cc51f",
// tabbar 上边框的颜色,仅支持 black/white
"borderStyle": "black",
// tab 的背景色
"backgroundColor": "#ffffff",
// list 接收一个数组,数组中的每个项都是一个对象
"list": [{
// 页面路径,必须在 pages 中先定义
"pagePath": "pages/index/index",
// 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
"iconPath": "static/icon_ck8ejdbukbf/aixin.png",
// 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
"selectedIconPath": "static/icon_yboweg9a00s/aixin.png",
// tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
"text": "首页"
},
{
"pagePath": "pages/one/one",
"iconPath": "static/icon_ck8ejdbukbf/aixin.png",
"selectedIconPath": "static/icon_yboweg9a00s/aixin.png",
"text": "一页"
},
{
"pagePath": "pages/two/two",
"iconPath": "static/icon_ck8ejdbukbf/aixin.png",
"selectedIconPath": "static/icon_yboweg9a00s/aixin.png",
"text": "二页"
}, {
"pagePath": "pages/three/three",
"iconPath": "static/icon_ck8ejdbukbf/aixin.png",
"selectedIconPath": "static/icon_yboweg9a00s/aixin.png",
"text": "三页"
}, {
"pagePath": "pages/four/four",
"iconPath": "static/icon_ck8ejdbukbf/aixin.png",
"selectedIconPath": "static/icon_yboweg9a00s/aixin.png",
"text": "四页"
}
]
},
// 用于设置所有页面的状态栏,导航栏,标题,窗口背景等设置
"globalStyle": {
// 导航栏的样式
"navigationBarTextStyle": "black",
// 导航栏的标题文字内容
"navigationBarTitleText": "uni-app",
// 导航栏的背景颜色
"navigationBarBackgroundColor": "#F8F8F8",
// 窗口的背景色
"backgroundColor": "#F8F8F8"
}
// 启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。
/* "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"
}
]
} */
}

uni-app学习记录01-pages配置项的相关教程结束。

《uni-app学习记录01-pages配置项.doc》

下载本文的Word格式文档,以方便收藏与打印。