不得姐实战教程 02 配置tabbar

【unaipp】tabBar配置/tabBar图标无法显示 原生tabBar是相对固定的配置方式,可能无法满足所有场景,这就涉及到自定义tabBar。但注意除了H5端,自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件:H5端不存在原生tabBar性能更高的概念,并且宽屏下常见的tabBar在顶部而不是底部,此时可以使用 custom-tab-bar组件 来自定义普通自定义tabBar:使用view自行绘制tabBar。如果页面是多页方式,切换tabBar将无法保持底部tabBar一直显示。 阅读详情

百思不得姐 项目实战

02 配置tabbar

1.打开ViewController.m 文件 单击右键

@interface ViewController ()


@end

中 ViewController选择 Refactor 中Rename…重构类名为XMGTabBarController

 

2. 打开  XMGTabBarController.h将其父类修改为  UITabBarController

3.打开 XMGTabBarController.m

修改 viewDidLoad  方法:

- (void)viewDidLoad

{

    [super viewDidLoad];

   

 

// 添加子控制器在tabbar控制器中创建控制器时就可以设置其tabBarItem的属性了

    UIViewController *vc01 = [[UIViewControlleralloc] init];

    vc01.tabBarItem.title =@"精华";

    vc01.tabBarItem.image = [UIImageimageNamed:@"tabBar_essence_icon"];

    vc01.tabBarItem.selectedImage = [UIImageimageNamed:@"tabBar_essence_click_icon"];

   

    //富文本用于更改NSString的字体样式

    NSMutableDictionary *attrs = [NSMutableDictionarydictionary];

    attrs[NSFontAttributeName] = [UIFontsystemFontOfSize:12];

    attrs[NSForegroundColorAttributeName] = [UIColorgrayColor];

    [vc01.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];

   

    NSMutableDictionary *selectedAttrs = [NSMutableDictionarydictionary];

    selectedAttrs[NSFontAttributeName] = [UIFontsystemFontOfSize:12];

    selectedAttrs[NSForegroundColorAttributeName] = [UIColordarkGrayColor];

    [vc01.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

   

    //选中tabBarItem后里面的图片文字会被自动蓝色渲染

    //   UIImage *image = [UIImageimageNamed:@"tabBar_essence_click_icon"];

    //   image = [imageimageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    //   vc01.tabBarItem.selectedImage = image;

   

    vc01.view.backgroundColor = [UIColorredColor];

   

    //addChildViewController是UIView的方法给控制器添加子控制器如果是普通控制器视图会被覆盖

    [self addChildViewController:vc01];

   

    UIViewController *vc02 = [[UIViewControlleralloc] init];

    vc02.tabBarItem.title =@"新帖";

    vc02.tabBarItem.image = [UIImageimageNamed:@"tabBar_new_icon"];

    vc02.tabBarItem.selectedImage = [UIImageimageNamed:@"tabBar_new_click_icon"];

    vc02.view.backgroundColor = [UIColorgrayColor];

    [vc02.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];

    [vc02.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

    [self addChildViewController:vc02];

   

    UIViewController *vc03 = [[UIViewControlleralloc] init];

    vc03.tabBarItem.title =@"关注";

    vc03.tabBarItem.image = [UIImageimageNamed:@"tabBar_friendTrends_icon"];

    vc03.tabBarItem.selectedImage = [UIImageimageNamed:@"tabBar_friendTrends_click_icon"];

    vc03.view.backgroundColor = [UIColorgreenColor];

    [vc03.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];

    [vc03.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

    [self addChildViewController:vc03];

   

    UIViewController *vc04 = [[UIViewControlleralloc] init];

    vc04.tabBarItem.title =@"我";

    vc04.tabBarItem.image = [UIImageimageNamed:@"tabBar_me_icon"];

    vc04.tabBarItem.selectedImage = [UIImageimageNamed:@"tabBar_me_click_icon"];

    vc04.view.backgroundColor = [UIColorblueColor];

    [vc04.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];

    [vc04.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

    [self addChildViewController:vc04];

}

 

4.打开AppDelegate.m文件

将self.window.rootViewController = [[ViewControlleralloc] init];改为

 self.window.rootViewController = [[XMGTabBarControlleralloc] init];


 

5.防止图片被渲染 还可以通过:

选中 Assets.xcassets/TabBar 下面的任意一副图片   在右侧切换到第三个视图 将 Render As 值改为 Original Image 修改后运行结果:



微信小程序TabBar开发全攻略:从基础配置到自定义组件实战 在移动应用开发中,底部导航栏是连接核心功能模块、引导用户操作的关键交互组件。其实现原理基于路由映射与状态管理,通过预定义配置将特定视图与用户操作绑定。从技术价值看,一个设计精良的导航系统能显著提升应用的用户留存与操作效率,是衡量前端工程化水平的重要维度。在微信小程序生态中,TabBar作为官方提供的原生导航解决方案,广泛应用于电商、社交、内容等各类小程序的核心页面切换场景。本文将聚焦微信小程序TabBar的配置机制与动态控制,深入解析list数组、pagePath等核心属性的正确用法,并探讨如何通过自定义组 阅读详情

相关推荐

【微信小程序_12_全局配置之 tabBar】

本文介绍了微信小程序中的 tabBar,包括其定义、组成部分、节点配置项和每个 tab 项的配置选项。还通过案例详细说明了配置 tabBar 的步骤,如拷贝图标资源、新建 tab 页面和配置 tabBar 选项等。tabBar 可实现多页面快速切换,合理配置能提升用户体验。

爱吃凉拌辣芒果的博客 2021

uniapp(tabbar配置)

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。同时,HBuilderX 还内置了常用的页面模板(如图文列表、商品列表等),选择这些模板,可以大幅提升你的开发效率。如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

m0_67388537的博客 1691

从SPI到JTAG:玩转FT2232H的MPSSE多协议切换指南(附配置代码)

本文详细介绍了如何利用FT2232H芯片的MPSSE技术实现SPI与JTAG协议的无缝切换,提供配置代码和调试技巧。通过解析MPSSE引擎架构和硬件特性,帮助开发者灵活应对多种串行协议需求,提升嵌入式开发效率。特别适合FPGA调试和物联网设备开发场景。

sun99的博客 254

【微信小程序】全局配置 - tabBar

目录全局配置 - tabBar1. 什么是 tabBar2. tabBar 的 6 个组成部分3. tabBar 节点的配置项4. 每个 tab 项的配置选项全局配置 - 案例:配置 tabBar1. 需求描述2. 实现步骤3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面5. 步骤3 - 配置 tabBar 选项6. 完整的配置代码 通过 app.json 文件的 pages 节点,快速新建 3 个对应的 tab 页面,示例代码如下:其中,home 是首页,messa

Javascript_tsj的博客 1万+

Ceres-solver examples之pose_graph_3d学习笔记

Ceres-solver examples之pose_graph_3d学习笔记简要说明变量说明关键步骤一、Costfunction的搭建其中包括:二、构造Problem 简要说明 ceres-solver库是google的非线性优化库,可以对slam问题,机器人位姿进行优化,使其建图的效果得到改善。pose_graph_3d是官方给出的二维平面上机器人位姿优化问题,需要读取一个g2o文件,运行程序...

幽冥小龙的博客 3889

Oracle EBS GL日记账批“选定以过账”状态数据修复

日记账来源:应收账款。用户操作过账以后,自动提交请求“过账:单一分类账”一直运行中,该请求执行5,6个小时甚至10多个小时无法完成,导致“标准管理器”阻塞大量请求待定,“冲突解决管理器”的待定数量不断增加。系统管理员不得不把该请求强制取消,此时,日记账批的状态处于“选定以过账”(GL_JE_BATCHES.STATUS为S),如下图 检查此日记账批有3千多条日记账题头,由于日记账比较多,日记账的科目余额计算需要大量服务器资源和执行时间比较长。

陈显平的专栏-Oracle EBS 3245

【微信小程序】基础篇 -- 全局配置 -- tabBar(十七)

大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第17篇文章;今天开始学习微信小程序的第九天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:底部 tabBar顶部 tabBar。

JMFive的博客 9689

教程: 将 SolidWorks 设计导出为 ROS 的 URDF

请按照以下步骤应用自定义徽标纹理:创建徽标材质文件:techniquepass材质名称:测试/材质颜色属性:环境、漫反射、镜面和发射都设置为白色(1 1 1 1),这意味着该材质看起来完全是白色的。纹理 在表面应用纹理图像 logo.png。将材质文件复制到 gazebo matrial:复制徽标图像:将 “徽标 ”替换为机器人上徽标所在位置的适当参考值。按照以上步骤,您就可以在 Gazebo 中为机器人添加自定义材质和纹理,包括徽标。

机器人控制与仿真应用 2457

微信小程序开发系列(五)·小程序配置文件详细介绍·tabbar配置以及页面配置

小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是:页面配置文件的属性和 全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项,页面中配置项 会覆盖全局配置文件中相同的配置项。,用以实现页面之间的快速切换,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。定义小程序顶部、底部 tab 栏。其中 list 接受一个数组,

时光の尘的博客 5663

YOLOv12涨点改进 | 独家创新-注意力改进篇 | ECCV 2024 | YOLOv12引入AgentAttention代理注意力模块,兼顾 Softmax 和线性注意力优点,提高检测精度

🔥本文给大家介绍使用Agent Attention模块改进YOLOv12网络模型。其主要作用是通过引入高效的代理token来减少计算复杂度,同时保留全局上下文建模能力。相比传统的Softmax注意力,Agent Attention通过代理token聚合并广播信息,从而降低了模型在处理高分辨率图像时的计算负担,并显著提高了推理速度。其优势在于保持了目标检测中的全局信息处理能力,同时加速了生成过程,特别是在高分辨率场景下,可以提高检测精度、减少内存消耗,并提升处理速度。

Ai缝合怪、助力小伙伴高效发论文 155

【数据同化第一期】基本概念介绍

【数据同化第一期】基本概念介绍

WW、forever的博客 1902

零基础微信小程序开发——全局配置之tabBar

tabBar是微信小程序中的全局配置之一,定义了底部的导航栏,通过tabBar,开发者可以设定多个页面的入口,用户点击时会切换到相应的页面。tabBar导航图标:每个Tab的图标。标题:每个Tab的标题。选中时的颜色:当某个Tab被选中时,它的文字和图标的颜色。未选中时的颜色:当某个Tab未被选中时,它的文字和图标的颜色。通过本文的介绍,你已经了解了如何在微信小程序中配置tabBar,并且学会了如何使用tabBar来实现底部导航栏的功能。你可以根据自己的需求调整tabBar。

小蜗牛的珍贵百宝箱 3700

简谈基于FPGA的千兆以太网设计

简谈基于FPGA的千兆以太网设计 今天给大侠带来简谈基于FPGA的千兆以太网设计,话不多说,上货。 今天我们来简单的聊一聊以太网,以太网在FPGA学习中属于比较高级的内容了,有些大侠肯定会感觉以太网学习起来非常不容易。其实,我可以告诉大家,前期学习的基础打扎实了,后期的学习也没那么难。总之就是说难没那么难,说容易也不是那么容易。那么,言归正传,下面让我们一起来聊一聊以太网的学习。 说起以太网,大家可能就会想到百兆以太网、千兆以太网以及万兆以太网等等。局域以太网从10M开始发展,经历几多的变迁,发展到现

3619

零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)

小程序开发中的全局配置文件是app.json,它位于小程序的根目录下。这个文件非常重要,因为它包含了小程序的一些基础信息和全局配置。

小白的大数据之旅的博客 5901

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

微信小程序之全局配置-window和tabBar

一、全局配置1、全局配置文件及常用的配置项二、全局配置 - window1、小程序窗口的组成部分2、了解 window 节点常用的配置项3、设置导航栏的标题4、设置导航栏的背景色5、设置导航栏的标题颜色6、全局开启下拉刷新功能7、设置下拉刷新时窗口的背景色8、设置下拉刷新时 loading 的样式9、设置上拉触底的距离三、全局配置 - tabBar1、什么是 tabBar2、tabBar 的 6 个组成部分3、tabBar 节点的配置项。

哥的时代,为你保驾护航 9413

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

使用uView根据权限动态配置uni-app中的tabBar

文章目录前言一、uView是什么?二、安装与配置三、使用步骤1、创建tabBar对应的页面文件2、配置page.json中的tabBar属性总结 前言 在构建uni-app项目的时候,发现本身自带的tabBar属性无法很好的做到根据权限动态进行配置,好巧不巧,我发现了我使用的UI框架uView可以使用vuex配置tabBar参数,于是心生一计,最终实验过后可行,于是便将其记录下来,供大家参考。 一、uView是什么? uView是uni-app生态专用的UI框架,是一个开源、免费的优秀框架。 二、安装与

FuyuumiAI的博客 1万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

利用vant给tabbar配置路由

1.在父级路由写tabbar标签 <template> <div class="layoutContainer"> <!-- 子路由出口 --> <router-view></router-view> <!-- 底部导航栏 --> <!-- 给tabbar--route属性 然后给每一项to属性就可以路由跳转了 --> <van-tabbar v-model="active"

simple5960的博客 1万+

小程序(三)配置tabbar及自定义tabbar样式

关于tabbar部分,官方文档是有明确的说明的,当然,我这里是不存在把官方文档给你复制一遍的情况。我大概把我再看官方文档过程中遇到的坑,大概复述一下。 一:配置tabbar 这个主要是使用小程序自带的tabbar,在项目根目录下的app.json中配置,这个简单配置一下就可以了。 这里放一下我的app.json配置: { "pages": [ "pages/index/index", "pages/logs/logs", "pages/article/article",

camellia的博客 3万+

SloppySwiper实战教程:解决滑动返回与TabBar动画冲突问题

SloppySwiper是一个强大的UINavigationController代理组件,它允许从屏幕任意位置而非仅边缘触发滑动返回手势,极大提升了iOS应用的用户体验。本教程将详细介绍如何利用SloppySwiper解决实际开发中常见的滑动返回与TabBar动画冲突问题,帮助开发者打造更流畅的应用交互。 ## 一、了解SloppySwiper核心功能 SloppySwiper的核心优势在于突

gitblog_01083的博客 1007

全局配置-tabBar

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:底部 tabBar 顶部 tabBar注意:tabBar中只能配置最少 2 个、最多 5 个tab 页签当渲染顶部 tabBar时,不显示 icon,只显示文本。

2301_76890677的博客 1135

微信小程序 TabBar 完整配置教程

小程序tabbar-非凡主力

爱睡的虫虫 364

uni-app教程一(项目创建、tabbar配置、运行)

uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。**[外链图片转存中…(img-KKuwMXqN-1713563473537)]

2401_84092666的博客 1078

配置基本的tabBar--底部导航配置属性

tabBar 如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页; 一、tabBar基本配置及属性说明 配置tabBar属性 在pages.json文件中,与“globalStyle”属性同级配置“tabBar”属性,代码结构如下: tabBar属性中配置项说明 属性 类型 必填 默认值 描述 平台差异说明 color HexColor 是 tab上的文字默认颜色 selectedColor HexColor 是 tab

qq_40117020的博客 7265

uni-app配置tabBar

1 引言 想要开发一个深入人心的APP,那么首先得有一些实实在在的功能,而这些功能一般都是有一个或多个页面所组成,所以,为了组织管理不同功能的页面,我们引入了tabBar(也是底部多功能选项卡),本次笔者记录使用uni-app配置tabbar的过程,没有多大的难度,所以只要细心阅读一下官方文档就no problem。 2 配置选 https://uniapp.dcloud.io/collo...

浪子四方 1万+

uni-app关于tabBar配置

uni-app项目页面底部导航栏 使用步骤 1,在pages中创建三个tabba页面,并在页面添加一些要显示出来的东西 2, 在pages.json文件里面配置文件页面路由 正常的话这三个tabbar页面也需要在tabBar 中的 list 是一个数组,最少2个、最多5个,但在这里暂时不用 3,先在home页引入底部tabbar导航 import tablebox from '../../../components/tablebox.vue'; tablebox.vue <templ...

LW0512的博客 1万+
上一篇: 不得姐实战教程 01 基本配置
下一篇: Xcode插件对比
LG_刚刚好
博客等级 码龄10年 14粉丝 91原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值