学习taro+react从0-1完整版5/7 --- 实现tabBar效果
实现tabBar效果,需要在app.config.ts中写tabBar的内容。selectediconpath:tab的选中图标路径,相对于项目目录。iconpath:tab的默认图标路径,相对于项目目录。pagepath:tab对应的页面路径,相对于项目目录。下一步在app.config.ts中增加路由信息。list:一次数组,包含每个tab的配置信息。然后分别创建home和my页面,完善页面内
·
实现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啦~
更多推荐
已为社区贡献1条内容
所有评论(0)