TabBar——APP中下面的“导航” 界面跳转

本文展示了如何在一个iOS应用中使用多个视图控制器并集成到TabBarController中,包括颜色配置、代理方法实现以及视图控制器的初始化与加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

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

    

    RedViewController *redVC = [RedViewController new];

    

    UINavigationController *redNC = [[UINavigationController alloc]initWithRootViewController:redVC];

    

    

    OrangeViewController *orangeVC = [OrangeViewController new];

    

    UINavigationController *orangeNC = [[UINavigationController alloc]initWithRootViewController:orangeVC];

    

    

    YellowViewController *yellowVC = [YellowViewController new];

    

    UINavigationController *yellowNC = [[UINavigationController alloc]initWithRootViewController:yellowVC];

    

    GreenViewController *greenVC = [GreenViewController new];

    

    UINavigationController *greenNC = [[UINavigationController alloc]initWithRootViewController:greenVC];

    

    

    CyanViewController *cyanVC = [CyanViewController new];

    

    UINavigationController *cyanNC = [[UINavigationController alloc]initWithRootViewController:cyanVC];

    

    BlueViewController *blueVC = [BlueViewController new];

    

    UINavigationController *blueNC = [[UINavigationController alloc]initWithRootViewController:blueVC];

    

    PurpleViewController *purpleVC = [PurpleViewController new];

    

    UINavigationController *purpleNC = [[UINavigationController alloc]initWithRootViewController:purpleVC];

    

    

#pragma mark tabBarController

    

    //准备视图控制器数组

    NSArray *array = @[redNC,orangeNC,yellowNC,greenNC,cyanNC,blueNC,purpleNC];

    

    //创建tabBarController

    UITabBarController *tabBar = [[UITabBarController alloc]init];

    //设定子视图控制器

    tabBar.viewControllers = array;

    

    

    //设置颜色,着色过程

    tabBar.tabBar.tintColor = [UIColor magentaColor];

    


    //设置条的颜色

    tabBar.tabBar.barTintColor = [UIColor whiteColor];

    

    //大小,高度:49

    

    //设置样式

//    tabBar.tabBar.barStyle = UIBarStyleDefault;

    

    

    //设置背景颜色

//    tabBar.tabBar.backgroundImage = [UIImage imageNamed:@"tabBar"];

    

    

    //跟事件相关的属性

    //默认选择的是哪一个

    tabBar.selectedIndex = 3;

    

    

    //设置badgeValue ---

    redVC.tabBarItem.badgeValue = @"HOT";

    

    orangeVC.tabBarItem.badgeValue = @"NEW";

    

    //设置代理对象

    tabBar.delegate = self;

    

    //一键换肤(同一修改UI--是一个单例

    [[UINavigationBar appearance] setBarTintColor:[UIColor magentaColor]];

    

    

    

    //指定为根视图控制器

    [self.window setRootViewController:tabBar];

    

    

    

    self.window.backgroundColor = [UIColor whiteColor];

    [self.window makeKeyAndVisible];

    

    return YES;

}


#pragma mark  UITabBarControllerDelegate

//应用场景比较少

//将要选中控制器执行的方法

-(BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController

{

    //请求数据在这弄完

    

    

    return YES;

}

//已经选中控制器执行的方法

-(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController

{

    //请求页面在这

    NSLog(@"");

    

}


=======================================


@implementation RedViewController


//M层数据写在初始化方法,每一个item都是M

//初始化本身就是管理数据的。

-(instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

    

    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

        

        self.title = @"red";

     

//        self.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemSearch tag:1];

        

//        self.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"chat" image:[UIImage imageNamed:@"08-chat"] selectedImage: [UIImage imageNamed:@"09-chat2"]];

        

        

//        //渲染

//        UIImage *image = [UIImage imageNamed:@"kiss.jpg"];

//        //渲染为原色版本

//        image= [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

//        

//        self.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"pp" image:image tag:101];

        

//        self.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"clock" image:[UIImage imageNamed:@"11-clock"]  tag:100];

        

        UIImage *home = [UIImage imageNamed:@"iconfont-home"];

        

        self.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"首页" image:home tag:101];

        

    }

    

    return self;

}



//V层放在loadView中一种可以使用自己的view,一种就是使用自定义的view,需要一个指向。



- (void)viewDidLoad {

    [super viewDidLoad];

    

   

    

    self.view.backgroundColor = [UIColor redColor];

}


### UniApp TabBar 页面跳转不刷新解决方案 在开发过程中遇到TabBar页面切换时刷新的问题,可以通过多种方式优化用户体验并防止不必要的页面重载。 #### 方法一:使用原生TabBar配合自定义逻辑控制显示 为了处理TabBar切换页面时的刷新问题,可以在`pages.json`中配置原生TabBar,并在应用启动时隐藏它。这样做的好处是可以避免页面切换带来的视觉闪烁效应[^1]: ```json { "tabBar": { "list": [ {"pagePath": "pages/index/index", "text": "首页"}, {"pagePath": "pages/logs/logs", "text": "日志"} ] } } ``` 接着,在`App.vue`文件内加入初始化操作以移除缓存项并隐藏默认TabBar: ```javascript export default { onLaunch: function () { uni.removeStorageSync('selectedIndex'); uni.hideTabBar(); }, }; ``` 这种方法确保了每次重启应用程序之后都会将选中的索引位置恢复至初始状态,而不会影响单次浏览期间的状态保持。 #### 方法二:调整生命周期函数调用时机 对于从普通页面向带有TabBar的目标页面传递数据的情况,建议采用`onShow()`而非`onLoad()`来进行参数获取与界面更新工作。因为当用户再次访问同一个TabBar下的子页面时,只会触发`onShow()`事件而不一定会重新加载整个页面,从而有效减少了重复渲染造成的性能损耗以及可能存在的异常行为[^3]: ```javascript // 在目标页面(如B页面)中修改为如下形式: export default { data() { return {}; }, onLoad(options) {}, // 此处不再用于接收参数 onShow() { const eventChannel = this.getOpenerEventChannel(); eventChannel.on('acceptDataFromOpenerPage', (data) => { console.log(data); // 对接收到的数据做进一步处理... }); } }; ``` #### 方法三:利用全局变量或Vuex管理共享状态 如果多个TabBar关联的不同页面之间需要频繁交互,则考虑引入更高级别的状态管理模式——例如VueX库来集中存储和同步这些信息。这种方式不仅有助于简化跨组件通信流程,还能更好地维护整体架构的一致性和可扩展性。 通过上述三种策略之一或者组合运用它们,能够显著改善UniApp项目中涉及TabBar场景的应用表现力和服务质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值