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

藍色妖姬 發表於 2019-10-22 06:00:00

<div class="cnblogs_code">
<pre>{
// 每个页面都需要在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"
 }
 ]
} */
}</pre>
</div>
  
来源：https://www.cnblogs.com/wanguofeng/p/11717552.html

頁: [1]

琼殿技术论坛's Archiver

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