本实例可实现在不同页面显示不同的tabBar或者首页不在tabBar中的需求。例如有ABC三个角色，根据角色不同进入不同的首页。
首先将微信官方的自定义tabBar实例添加到自己的项目
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
"tabBar": { "custom": true,// 启用自定义tabBar "color": "#ffffff", "selectedColor": "#ffffff", "backgroundColor": "#20c378", "list": [ // 这里要将所有的tabBar加入 { "pagePath": "pages/index1/index/index", "text": "首页1" }, { "pagePath": "pages/index2/index/index", "text": "首页2" }, { "pagePath": "pages/index3/index/index", "text": "首页3" }, { "pagePath": "pages/mine/index/index", "text": "个人中心" } ] }, |
然后编辑./custom-tab-bar/index.js 的data部分，这里是需要显示的tabBar内容，之后将修改list来实现动态tabBar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ selected: 0, color: "#7A7E83", selectedColor: "#3cc51f", list: [ { pagePath: "/pages/index1/index/index", iconPath: "/static/images/icon_component.png", selectedIconPath: "/static/images/icon_component_HL.png", text: "首页", showTabBarRedDot:false }, { pagePath: "/pages/message/index/index", iconPath: "/static/images/icon_API.png", selectedIconPath: "/static/images/icon_API_HL.png", text: "消息", showTabBarRedDot:false } ] } |
在methods中加入修改list的方法：
|
1 2 3 4 5 6 |
setPath:function(index,path){ let key = 'list['+ index +'].pagePath'; this.setData({ [key]:path }); } |
最后一步，在需要修改tabBar的页面onload事件中执行：
|
1 2 3 |
if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setPath(0,'/pages/index2/index/index'); } |
文章评论 暂无评论
暂无评论