1. 全局配置文件及常用的配置项
2.window
(1).小程序窗口的组成部分
(2). 了解 window 节点常用的配置项
(3). 设置导航栏的标题
(4). 设置导航栏的背景色
(5). 设置导航栏的标题颜色
(6). 全局开启下拉刷新功能
(7). 设置下拉刷新时窗口的背景色
(8).设置下拉刷新时 loading 的样式
(9).设置上拉触底的距离
3.tabBar
(1).什么是 tabBar
(2).tabBar 的 6 个组成部分
(3).tabBar 节点的配置项
(4).每个 tab 项的配置选项
4.案例:配置 tabBar
(1).需求描述
(2).实现步骤
步骤1 - 拷贝图标资源
步骤2 - 新建 3 个对应的 tab 页面
步骤3 - 配置 tabBar 选项
完整的配置代码
javascript
{
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window": {
"navigationBarTextStyle":"black",
"navigationBarTitleText": "微信小程序",
"navigationBarBackgroundColor": "#00ffff",
"backgroundColor": "#eee",
"enablePullDownRefresh": true,
"backgroundTextStyle": "light"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents",
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/tabs/home.png", //相对路径
"selectedIconPath": "images/tabs/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/tabs/message.png",
"selectedIconPath": "images/tabs/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "images/tabs/contact.png",
"selectedIconPath": "images/tabs/contact-active.png"
}
],
"color": "#000000",
"selectedColor": "#ff0000",
"backgroundColor": "#eee",
"position":"bottom", // top或者bottom
"borderStyle": "white" // white或者black
}
}