赞
踩
实现tabBar效果,需要在app.config.ts中写tabBar的内容
示例内容如下:
- tabBar: {
- list: [{
- 'iconPath': 'assets/home1.png',
- 'selectedIconPath': 'assets/home2.png',
- pagePath: 'pages/about/index',
- text:"关于"
- },{
- 'iconPath': 'assets/me1.png',
- 'selectedIconPath': 'assets/me2.png',
- pagePath: 'pages/me/index',
- text:"我的"
- }]
- }
定义内容和图片文字,在这里进行配置
tabbar:表示小程序的底部导航栏
list:一次数组,包含每个tab的配置信息
iconpath:tab的默认图标路径,相对于项目目录
selectediconpath:tab的选中图标路径,相对于项目目录
pagepath:tab对应的页面路径,相对于项目目录
text:tab的文本内容
然后分别创建home和my页面,完善页面内容
下一步在app.config.ts中增加路由信息
- 'pages/me/index',
- 'pages/about/index',
然后编译一下就可以实现tabBar啦~
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。