一 概述
- 框架搭建——配置底部切换tabBar
- 框架搭建——新建首页及个人中心页面
二 配置底部切换tabBar
2.1 tarBar配置文件
app.json
2.2 tarBar添加按钮
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/home.png",
"selectedIconPath": "images/home_select.png",
"text": "首页"
},
{
"pagePath": "pages/person/person",
"iconPath": "images/me.png",
"selectedIconPath": "images/me_select.png",
"text": "个人中心"
}
]
},
说明:
属性 | 说明 |
---|---|
list | tabBar下的tab标签列表 |
pagePath | 页面路径 |
iconPath | 默认图标 |
selectedIconPath | 选中图标选项 |
text | tab显示文字 |
2.3 tabBar选中和未选中文字颜色
"tabBar": {
"color": "#000",
"selectedColor": "#f7982a",
"backgroundColor": "#f6f6f6",
"borderStyle": "white"
},
说明:
属性 | 说明 |
---|---|
color | tabBar的默认字体颜色 |
selectedColor | tabBar的字体选中颜色 |
backgroundColor | tabBar的背景 |
2.4 windows样式
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f7982a",
"navigationBarTitleText": "个人中心",
"navigationBarTextStyle": "white"
},
三 新建首页及个人中心页面
3.1 新建页面
-
右键pages,建立对应的文件夹如(address文件夹)
-
在文件夹上,右键——>新建page(包含以下文件)
address.js address.json address.wxml address.wxss
-
同理,新建其他页面
页面 page 首页 index 个人中心 person 收货地址 address 订单物流查询页面 order 个人详情页 detail 个人资料修改页 modify
3.2 app.js页面配置
"pages": [
"pages/index/index",
"pages/person/person",
"pages/address/address",
"pages/order/order",
"pages/detail/detail",
"pages/modify/modify"
],