【微信小程序】小程序入门之创建目录和tabBar配置
来源:互联网 发布:淘宝最迟发货时间 编辑:程序博客网 时间:2024/06/05 04:33
【微信小程序】小程序入门之创建目录和tabBar配置
视频观看:http://edu.csdn.NET/course/detail/3081
创建测试目录,创建必要的文件test.js、test.wxml
源代码
App.json { "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], //test.jsPage( {data:{ name:"dudu" },}) <!--test.wxml--><view>test页</view><view>{{name}}</view>
四、tabBar配置
如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
"tabBar":{ "color":"#ccc", "selectedColor": "black", "list":[{ "pagePath":"pages/index/index", "text":"首页" },{ "pagePath":"pages/test/test", "text":"测试页" },{ "pagePath":"pages/logs/logs", "text":"日志"} ] }
"tabBar":{ "color":"#ccc", "selectedColor": "black", "list":[{ "pagePath":"pages/index/index", "text":"首页", "iconPath":"images/featured.png", "selectedIconPath":"images/featured-actived.png" },{ "pagePath":"pages/test/test", "text":"测试页", "iconPath":"images/profile.png", "selectedIconPath":"images/profile-actived.png" },{ "pagePath":"pages/logs/logs", "text":"日志", "iconPath":"images/search.png", "selectedIconPath":"images/search-actived.png" } ] }
源代码
{ "pages":[ "pages/index/index", "pages/test/test", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "微信", "navigationBarTextStyle":"white" }, "tabBar":{ "color":"#ccc", "selectedColor": "black", "list":[{ "pagePath":"pages/index/index", "text":"首页", "iconPath":"images/featured.png", "selectedIconPath":"images/featured-actived.png" },{ "pagePath":"pages/test/test", "text":"测试页", "iconPath":"images/profile.png", "selectedIconPath":"images/profile-actived.png" },{ "pagePath":"pages/logs/logs", "text":"日志", "iconPath":"images/search.png", "selectedIconPath":"images/search-actived.png" } ] }, "debug":true}相关文章阅读:
微信小程序全方位深度解析【免费学习】
【微信小程序】小程序windows版本环境搭建
【微信小程序】小程序入门app.js、app.json、app.wxss解说
【微信小程序】小程序入门的目录结构及配置
0 0
- 【微信小程序】小程序入门之创建目录和tabBar配置
- 微信小程序入门之tabBar
- 【微信小程序】小程序入门的目录结构及配置
- 微信小程序之tabbar
- 小程序tabbar跳转
- 小程序tabBar添加
- 微信小程序之tabbar切卡
- 微信小程序开发阅读&电影小程序之(0)——基础目录创建
- 微信小程序开发入门篇----创建第一个小程序
- 小程序底部tabBar导航配置(app.json)
- 微信小程序之TabBar的使用
- 微信小程序tabBar使用
- 微信小程序Tabbar
- 微信小程序隐藏tabBar
- 微信小程序 tabBar
- 微信小程序tabBar
- 微信小程序tabBar设置
- 微信小程序自定义tabbar
- css 中多个class选择器的详解
- 设计模式学习笔记--单例模式
- PLSQL调试存储过程无法进入单步调试
- CoolFormat 源代码格式化工具使用手册
- 记事本(纯界面)
- 【微信小程序】小程序入门之创建目录和tabBar配置
- TIOBE开发语言排行榜
- single task Activity不能使用startActivityForResult解释
- 扫描二维码和签到打卡应用程序
- iphone如何查看SIM联系人
- POJ 2528 线段树 + 延迟标记 + 离散化
- 谁能用通俗的语言解释什么是RPC框架?
- Modelsim仿真注意
- intent的四种启动模式和7大属性