(2).全局配置-window
window 主要时配置顶部导航栏和导航栏背景色的配置。
- window节点中常用的配置项
1.修改导航栏的标题
app.json->window->navigationBarTitleText
"navigationBarTitleText": "金橘社区",
2.导航栏的背景色：只能支持16进制的颜色
app.json->window->navigationBarBackgroundColor
3.导航栏的标题颜色: 只要black和white
app.json->window->navigationBarTextStyle
4.全局开启下拉刷新功能: 默认没有开启下拉刷新，真机上不会自动关闭
app.json->window->enablePullDownRefesh的值设置为 true
5.设置下拉刷新时窗口的背景色 指定时 16进制
app.json->window->backgroundColor
6.下拉刷新的时候样式
app.json->window->backgroundTextStyle
7.设置上拉触底的距离: 就是我们的下拉滑块距离底部还有多长加载数据。默认是50
app.json->window->onReachBottomDistance
app.json
"window":{ "backgroundTextStyle":"dark", "navigationBarBackgroundColor": "#2b4b6b", "navigationBarTitleText": "金橘社区", "navigationBarTextStyle":"white", "enablePullDownRefresh": true, "backgroundColor": "#efefef", "onReachBottomDistance": 100 },
(3).全局配置-tabBar
tarBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。
底部tabBar顶部tabBar
注意:
- tabBar中只能配置
最少两个、最多五个tab页签。 - 当渲染
顶部tabBar的时候，不显示icon,只显示文本。
1. tabBar的6个组成部分
2. tabBar节点的配置项
- 每个tab项的配置选项
app.json
"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/test/test", "text": "测试" } ] },
- 配置tabBar
实现步骤:
- 拷贝图标资源。
- 把资料目录中的images文件夹，拷贝到小程序项目根目录中。
- 将需要用到的小图标分为3组，每组两个:
图片名称包含-active的是选中转换的图标。图片名称中不包含- active的是默认图标。
- 新建3个对应的tab页面。
- 配置tab的对应选项。
1. 打开app.json配置文件，和pages、window评级，新增 toBar 节点。 2. tabBar节点中，新增list数组，这个数组中存放的是每个tab项的配置对象 3. 在list数组中，新增每一个tab项的配置对象。对象的属性包括如下: (1).pagePath: 指定当前tab对应的页面路径 (必填) (2).text指定当前tab上按钮的文字(必填) (3).iconPath指定当前tab未选中时候的图片路径(可选) (4).selectdIconPath: 指定但钱tab被选中后高亮的图片路径(可选)
app.json
{ "pages":[ "pages/home/home", "pages/message/message", "pages/contact/contact" ], "window":{ "backgroundTextStyle":"dark", "navigationBarBackgroundColor": "#2b4b6b", "navigationBarTitleText": "金橘社区", "navigationBarTextStyle":"white", "enablePullDownRefresh": true, "backgroundColor": "#efefef", "onReachBottomDistance": 100 }, "tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "images/index.png", "selectedIconPath": "images/index-active.png" }, { "pagePath": "pages/message/message", "text": "信息", "iconPath": "images/mail.png", "selectedIconPath": "images/mail-active.png" }, { "pagePath": "pages/contact/contact", "text": "电话", "iconPath": "images/phone.png", "selectedIconPath": "images/phone-active.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
9.页面配置 -(导航栏和tabBar)
(1).页面配置文件的作用
小程序中每个页面都有自己的 .json配置文件，用对当前页面的窗口外观、页面效果等进行配置。
页面配置只需要在一个对象中，直接编写属性就可以了
(2).页面配置文件中
这里完全和全局配置一样
{ "usingComponents": {}, "navigationBarBackgroundColor": "#ff0000" }
