一 概述
二 tabBar组件介绍
2.1 常用属性表
属性 | 说明 |
---|
color | 未选择时,底部导航文字的颜色 |
selectedColor | 选中时,底部导航文字的颜色 |
borderStyle | 底部导航边框的颜色(如果没有写入样式会出现浅灰色线条) |
backgroundColor | 底部导航背景色 |
list | 导航配置数组 |
2.2 list数组元素
属性 | 说明 |
---|
pagePath | 页面访问地址 |
iconPath | 未选择时,图片路径 |
selectedIconPath | 选中时,图片路径 |
text | 导航图标下方文字 |
三 项目初始化
3.1 创建空项目,配置app.json文件
{
"pages": [
"pages/index/index",
"pages/picture/picture",
"pages/video/video",
"pages/map/map",
"pages/guest/guest"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ff4c91",
"navigationBarTitleText": "婚礼邀请函",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": false
},
"tabBar": {
"color": "#ccc",
"selectedColor": "#ff4c91",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "邀请函",
"iconPath": "/images/invite.png",
"selectedIconPath": "/images/invite.png"
},{
"pagePath": "pages/picture/picture",
"text": "照片",
"iconPath": "/images/marry.png",
"selectedIconPath": "/images/marry.png"
},{
"pagePath": "pages/video/video",
"text": "美好时光",
"iconPath": "/images/video.png",
"selectedIconPath": "/images/video.png"
},{
"pagePath": "pages/map/map",
"text": "婚礼地点",
"iconPath": "/images/map.png",
"selectedIconPath": "/images/map.png"
},{
"pagePath": "pages/guest/guest",
"text": "宾客信息",
"iconPath": "/images/guest.png",
"selectedIconPath": "/images/guest.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
3.2 项目样式文件
page{
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
3.3 配置后的页面样式
四 项目目录结构说明
路径 | 说明 |
---|
app.js | 应用程序的逻辑文件 |
app.json | 应用程序的配置文件 |
app.wxss | 定义公共样式 |
pages/index/ | "邀请函"页面文件保存目录 |
pages/picture/ | "照片"页面文件保存目录 |
pages/video/ | “美好时光”页面文件保存目录 |
pages/map/ | “婚礼地点”页面文件保存目录 |
pages/guest/ | “宾客信息”页面文件保存目录 |
images | 图片文件 |