【微信小程序开发】tabBar的使用技巧
2016-11-15 11:31
966 查看
1、效果展示
2、原理:在app.json中配置tabBar属性
3、关键代码
4、操作方法
新建一个项目,打开app.json文件,将关键代码复制到"window":{},后面,注意window的大括号前加逗号,如下图
配置tabBar属性值
5、源代码获取方式
百度云链接:http://pan.baidu.com/s/1mh6CGIG
6、在使用tabBar过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信号进行咨询,微信号:FutureJet 感谢您的支持!
2、原理:在app.json中配置tabBar属性
3、关键代码
"tabBar": { "color":"#666666", "selectedColor":"#06bd04", "list": [{ "pagePath": "index", "text": "首页", "iconPath": "images/index.png", "selectedIconPath": "images/indexHL.png" },{ "pagePath": "picDisplay", "text": "图片展示", "iconPath": "images/picDisplay.png", "selectedIconPath": "images/picDisplayHL.png" }] }
4、操作方法
新建一个项目,打开app.json文件,将关键代码复制到"window":{},后面,注意window的大括号前加逗号,如下图
配置tabBar属性值
"tabBar": { //设置tabBar文字默认颜色 "color":"#666666", //设置tabBar文字被选中是的颜色 "selectedColor":"#06bd04", //tab列表,数组类型,改数组内至少要有两个但不大于5个的tab对象 "list": [{ //设置tab跳转页面链接 "pagePath": "index", //设置tab上的文字 "text": "首页", //设置tab上的默认图标 "iconPath": "images/index.png", //设置tab被选中时的图标 "selectedIconPath": "images/indexHL.png" },{ "pagePath": "picDisplay", "text": "图片展示", "iconPath": "images/picDisplay.png", "selectedIconPath": "images/picDisplayHL.png" }] }
5、源代码获取方式
百度云链接:http://pan.baidu.com/s/1mh6CGIG
6、在使用tabBar过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信号进行咨询,微信号:FutureJet 感谢您的支持!
相关文章推荐
- 微信小程序开发常用技巧(9)——使用模板文件方便公共代码开发
- 微信小程序开发——tabBar使用
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 快速了解微信小程序的使用,一个根据小程序的框架开发的 todos app
- 微信小程序开发技巧及填坑记录
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- iPhone开发技巧之工具篇(3)--- 使用clang静态解析Objective-C程序
- 微信小程序开发教程(破解版IDE 无内测资格也可使用)
- 微信小程序开发工具使用与设计规范(二)
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- 拿到微信小程序APPID了如何使用https版API中心来开发
- eclipse使用技巧以及开发安卓程序过程中遇到的问题
- Linux 程序开发打印 Debug 信息的使用技巧
- 微信小程序TabBar底部栏的使用
- 使用Visual Basic 6.0开发程序的一些方法技巧收集之二:进程操作
- Linux 程序开发打印 Debug 信息的使用技巧
- 加快使用Netbeans开发Web程序的技巧
- Linux 程序开发打印 Debug 信息的使用技巧
- 使用野狗做后端,开发微信小程序不需要后端工程师,前端自己就可以搞定了
- 微信小程序开发之选项卡(窗口底部TabBar)页面切换