小程序在二级页面可以设置底部tabbar吗

小程序在二级页面可以设置底部tabbar，设置方法为：

1、首先打开微信开发者工具，找到项目文件目录中的app.json并打开它。

2、然后再Json中怎样一个key——“tabBar“。

3、然后是设置文本的颜色："color":"#8a8a8a"。

4、设置文本选中时的颜色，"selectedColor":"#07c160。

5、设置tabbar的背景颜色，例如："backgroundColor":"gray"。

6、设置tabbar的列表，也就是底部的菜单栏。"list":[{"pagePath":"pages/idndex/index",

"text":"首页", "iconPath":"images/tabbar/tabbar1.png" }。

7、保存文件，在效果预览区域进行预览。

为了更好理解使用用tabbar和切换视图，我们创建一个Empty Application。

　 　1、 打开Xcode ，新建项目

　 　2、 创建View Controller

在项目上按花键+N创建新文件，创建 Objective-C class 文件，按Next按钮，subClass 选UIViewController 。勾选上xib选项

以同样方式创建另外三个ViewController ，RedViewController ，GreyViewController，YellowViewController。四个View准备好了。那么Tabbar呢？

　 　3、 创建TabBarController.xib文件，选择创建Empty文件

这时候你发现创建的xib文件是空白的，不用慌，去右下角控件栏中把TabBar Controller拖过来就Ok了。

4、 关联TabBarController.xib ,tabbarAppDelegate这两个文件

在上图中选择File’s Owner，打开Identity Inspector，在Class一栏选择tabbarAppDelegate

这样，我们就可以创建TabBarController.xib 文件指向tabbarAppDelegate 文件的Outlet映射了。

5、 在Xcode中的工具栏的View菜单找到 打开Assistant Editor，使tabbarAppDelegate.h和TabBarController.xib 同时打开。

在xib文件上按住control键，往tabbarAppDelegate.h，创建Outlet.

d出窗口输入 rootController,点connect。

　 　6、 添加代码

打开tabbarAppDelegate.m，在didFinishLaunchingWithOptions方法中添加代码：

1.- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

2. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]

3. // Override point for customization after application launch.

4. [[NSBundle mainBundle] loadNibNamed:@"TabBarController" owner:self options:nil]

5. [self.window addSubview:self.rootController.view]

6. self.window.backgroundColor = [UIColor whiteColor]

7. [self.window makeKeyAndVisible]

8. return YES

　 　7、 往TabBarController.xib上添加Tab Bar Item,

把控件栏上的Tab Bar Item控件往TabBarController.xib上拖拽即可，一个放4个。

　 　8 、关联Tab Bar Item和***ViewController。

选择其中一个Tab Bar Item，在右上角打开Identity Inspector，在Class中选择BlueViewController：

然后，打开Attribute，在NIB Name选择BlueViewController：

其他3个tab item重复类似的 *** 作，选中对应的ViewController,这样在切换Tab标签时，就可以切换到对应的页面。

9、 设置tab item的属性

选中其中一个tab item ,会在右上角的属性栏里看到如下信息

Badge是红色圈圈里面有数字 ，表示有多少条信息的属性

Identifier 是tab item的样式，选custom是自定义，下面的是系统的样式。我选了其中四种。

bar ITem 的title image在custom的样式下能设置。

10 、剩下的3个Tab Item也做类似的设置即可。

现在基本完工，运行看看结果如何。好吧，其实和第一第二个图是一样的`，这里就不放了。

11 、在viewDidLoad方法加Log观察切换View

可以加写日志看看对应的View是什么时候运行的。第一个运行的View是BlueViewController，点击其他的tab项时，加载其他的view，加载一次之后下次点击不再调用viewDidLoad。

1.- (void)viewDidLoad

2. [super viewDidLoad]

3. NSLog(@"BlueViewController")

4. // Do any additional setup after loading the view from its nib.

咳咳，答应过年增加新功能的，没想到拖到现在，延迟了一个来月，尴尬，尴尬

那个，我们先忽略这尴尬的事情吧，进入正题才是最重要滴

老规矩，先上效果图：

跟原来的图有个很明显的区别，你们也一定都发现了，对不对。那么显眼的小红点，一定都看到了吧。

当然除了这个，还增加了一项功能，虽然不是很明显，但相信也有小伙伴发现了吧，截图的这俩手机屏幕明显大小不同，但是底部导航栏的大小还是相差不大滴。

是的，你们没有看多，这次不仅增加了小红点功能，还增加了底部导航栏的适配，你没有听错，以后底部导航栏也不用那些dp、sp了，都按照UI妹子们标注的px来就可以了，再也不用为了底部导航栏去跟UI妹子解释啥叫dp了。

好了，效果图展示完了，现在该进入枯燥的使用介绍了。

由于这次改动有点大，所以，先介绍下上个稳定版本的用法，到底是用最新的，还是用原来的，就看各位小伙伴的意愿了

上个稳定版本是1.1.3的，引用方式如下

compile 'com.hjm:BottomTabBar:1.1.3'

具体用法如下（备注都加好了，我也就不多废话了）：

最新版本是1.2.2的，引用方式如下

compile 'com.hjm:BottomTabBar:1.2.2'

其实1.2.0与1.1.3区别并不大，只有4点改动：

现在默认的，分割线高度都是设置的1个像素。这里以后也固定都用这个默认的高度了，不再对外提供修改的方法。

这就是新增加的适配了，多的也不说了，你们都懂的

标准尺寸，就是UI妹子给你提供的效果图的屏幕尺寸，只要在init()方法里添加上标准尺寸，你就可以放肆的使用px了

这个方法就是控制小红点显示的方法了，index就是需要显示或者隐藏小红点的TabItem，isShow是一个boolean类型的参数，他是控制小红点是否显示的，如果为true，就会显示小红点；如果为false，就会隐藏小红点

1.2.2版本新增了两个方法

介绍到这里，超简单的底部导航栏，第二阶段就可以告一段落了。以后还会持续优化，完善的。

第三阶段我打算封装一下有中间凸起的底部导航栏，这个功能我本地已经做了，但是封装进去的时候，封装的不理想，这次就没有上线，留作下次了。

最后，再上个 GitHub 地址

---