微信小程序(四):Tab分页
2016-11-14 11:05
253 查看
本文介绍在微信小程序中实现多Tab分页的功能。内容多出自官方文档,增加了一些作者实践过程中遇到的问题与注意点。
本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
微信小程序提供了一个组件tabBar用来实现多tab分页功能。如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800
1.1 组件 tabBar
微信小程序提供了一个组件tabBar用来实现多tab分页功能。如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
微信小程序提供了一个组件tabBar用来实现多tab分页功能。如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
1.2 配置位置
微信小程序中认为整个页面分为 导航栏navigationBar,tab栏 tabBar 和 页面区域(就是在pages中配置的页面显示区域),所以tabBar的配置位于全局配置文件app.json 文件中。"tabBar": { "color": "#a9a9a9", "selectedColor": "#1f1f1f", "backgroundColor": "#fefefe", "borderStyle": "white", "list": [ { "pagePath": "pages/main/main", "text": "首页", "iconPath": "image/icon_home.png", "selectedIconPath": "image/icon_home_select.png" }, { "pagePath": "pages/aboutUs/aboutUs", "text": "关于我们", "iconPath": "image/icon_person.png", "selectedIconPath": "image/icon_person_select.png" } ] }
1.3 icon图标
对于每一个tab的icon,需要放置于本地工程内,经测试此处不支持网络图片。需在工程根目录下创建用于存放图片的文件夹,文件名随意,使用时需指定其相对路径。(作者实际操作过程中,没有在IDE中找到在image文件夹中放入图片文件的方法,我是在本地文件中操作的,不知道是功能太隐蔽还是我没有找到,如果有知道的望留言告知){ "pagePath": "pages/main/main", "text": "首页", "iconPath": "image/icon_home.png", "selectedIconPath": "image/icon_home_select.png" }
相关文章推荐
- 微信小程序小技巧系列《一》幻灯片,tab导航切换
- 微信小程序—Tab 切换,下拉刷新,上拉加载(适用1221)
- 微信小程序-页面跳转到对应的顶部tab
- 微信小程序之切换页签tab
- 微信小程序按钮不能跳转Tab的解决方法
- 微信小程序之tab切换效果
- 转载【微信小程序】:微信小程序滚动Tab选项卡:左右可滑动切换(仿某宝)
- 微信小程序redirect 到tab不刷新
- 微信小程序分页加载的实例代码
- 微信小程序学习用demo:我厨,tab切换,界面设计(适用1230
- 解决微信小程序switchTab后tab不刷新
- 微信小程序模板之分页滑动栏
- 转载:移动端+微信小程序实现,手机端滑动分页代码思路(ajax)
- 微信小程序 swiper scroll-view height设置自适应 tab选项卡
- 微信小程序小技巧系列《一》幻灯片,tab导航切换
- 微信小程序模板-分页滑动栏
- 微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
- 微信小程序开发(五)-类似于tab切换
- 微信小程序之Tab切换