实战项目名称:仿知识星球App
技术栈:前端 =>uni-app
( 后端:Node.js + Mysql + Apollo + Graphql )
已实现功能:微信登录,创建星球,内容管理,星球管理
项目git地址:请点击访问
项目最终效果图:@点击访问效果图,欢迎关注收藏订阅专栏!!!
提示:该项目只用于个人实战,不应用于任何商业用途。
一、今日实战目标
- 配置tabBar
二、实战步骤
1.存入相应图片文件
- 每个tabBar都应该有两张图片,
分为选中和未选中
,uniapp也可以自定义tabBar,在这个项目中我们就不进行自定义,之后会专门写一篇文章关于如何自定义tabBar的。
2. 配置page.json
代码如下(示例):
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/discover/discover",
"style": {
"navigationBarTitleText": "发现",
"enablePullDownRefresh": true,
"navigationStyle": "custom"
}
}
],
"tabBar": {
// "blurEffect": "extralight", tabBar毛玻璃效果
"color": "#6c6c6c", // 未选中字体颜色
"selectedColor": "#17B99A", // 被选中字体颜色
"borderStyle": "white",
"backgroundColor": "white",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "./static/tabbar/index.png", // 未选中显示的图像
"selectedIconPath": "./static/tabbar/index- select.png", // 选中显示的图像
"text": "星球"
}, {
"pagePath": "pages/discover/discover",
"iconPath": "./static/tabbar/discover.png",
"selectedIconPath": "./static/tabbar/discover-select.png",
"text": "发现"
}, {
"pagePath": "pages/user/user",
"iconPath": "./static/tabbar/user.png",
"selectedIconPath": "./static/tabbar/user-select.png",
"text": "我"
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF",
// 输入框聚焦页面内容不往上顶
"app-plus": {
"background": "#FFFFFF",
"softinputMode": "adjustResize"
}
}
}
总结
配置了tabBar,接下来我们就可以开始页面的开发,我会先按登录页、首页、发现页、个人中心的顺序进行更新
由于项目目前在对接后台api中,项目git地址:请点击访问,大家可以去clone下来借鉴下;
- 温馨提示:
- 项目仅用于个人实战,设计图和架构是自己基于
知识星球APP
进行设计的,算得上是入门级的uni-app,后期会更新一个企业级uniapp项目
。 - 我是在空闲中写写博客,并没有很规范,欢迎在评论区留下你的建议与意见。
git
项目拷贝下来的代码有不懂的,可以截图私信给我,看到会回复你,希望可以帮助到你了解和开发uniapp。