首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

03_iOS导航栏的正确隐藏方式

简介 在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如何做了...第一种做法 注意这里一定要用动画的方式隐藏导航栏,这样在使用滑动返回手势的时候效果最好,和上面动图一致.这样做有一个缺点就是在切换tabBar的时候有一个导航栏向上消失的动画. - (void)viewWillAppear...]; [self.navigationController setNavigationBarHidden:NO animated:animated]; } 第二种做法 设置self为导航控制器的代理...,实现代理方法,在将要显示控制器中设置导航栏隐藏和显示,使用这种方式不仅完美切合滑动返回手势,同时也解决了切换tabBar的时候,导航栏动态隐藏的问题。...最后要记得在控制器销毁的时候把导航栏的代理设置为nil。

1.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    记一次小程序自定义导航栏及加载动画的解决方案

    记一次小程序自定义导航栏及加载动画的解决方案 主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ?...loading 导航栏是一个组件,自定义组件通过 properties 获得 prop 参数的,组件还需要维护 statusBarHeight,titleBarHeight 和 navigatorHeight...setBarHeight、动态获取状态栏和标题栏高度的 getBarHeight,以及判断是否为 IOS 系统。... 自定义导航栏的高度就是 titleBarHeight,paddingTop 的值就是 statusBarHeight 因为自定义导航栏是 fixed 元素,因此这个 class...{ position: absolute; left: 50%; transform: translateX(-50%) } 最后还需要解决 pullDownRefresh 的加载动画问题

    1.6K41

    最新iOS设计规范二|7大应用架构

    为了便于记忆,个人理解可以分为两类,一类是使用流程:启动 —新手引导—加载中—请求许可—设置项。另一类是结构组建:模态和导航。(请注意:这两个及其重要!)...后台也要尽可能使用预加载,例如在播放动画或用户正在操作导航栏的选项卡时,后台预先加载出来即将播放和显示的内容。 用引导或娱乐的方式来掩盖加载的时间。...例如,当模态视图包含导航栏时,它应该采用与APP导航栏相同的外观。 为模态视图的展示提供合适的过渡动画。使用与APP风格统一的过渡动画,增强用户对内容转变的认知。...使用标准导航组件。尽可能使用标准导航控件,例如页面控件,标签栏,分段控件,表视图,集合视图和拆分视图。用户已经很熟悉这些控件了,这样能够让用户更轻松地使用你的APP。 使用导航栏贯穿层级结构。...导航栏的标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。 使用 Tab Bar(标签栏)展示对应类别的内容或功能。使用标签栏显示对应类别的内容或功能。

    2.6K20

    IOS开发系列——启动页专题【整理,部分原创】

    *)launchOptions方法内加入代码: [[UIApplication sharedApplication] setStatusBarHidden:NO]; 【注意】 如果你的程序同时使用了导航栏作为根视图控制器...UIApplication sharedApplication] setStatusBarHidden:NO]放在 [self.window makeKeyAndVisible];之前,否则会出现状态栏与导航栏重叠的情况...可能是因为调用 makeKeyAndVisible时会去判断当前程序是否显示状态栏,以此来布导航栏的位置。...引导页采用本地缓存方式,支持从服务端动态加载然后更新显示。 4.3.2 LaunchVC弹出逻辑 LaunchVC弹出逻辑(注意只加载一次): if (!...launchImgFileArr = [MDUtilitygetLaunchImgFilePathArr]; if ([launchImgFileArr count] <= 0) { return; } //动态加载引导页图片

    1.8K10

    百亿补贴通用H5导航栏方案

    1.1 性能问题 ssr预渲染时,无法对原生导航条进行预加载。对于百亿,便宜包邮等使用ssr预渲染的频道,因为原生导航栏无法进行预加载,导致上屏较慢等问题。...4、灵活定制 采用左、中、右、状态栏、导航栏分层设计的模式,支持传入React.ReactElement,比原生定制性更强,可灵活定制目前站内绝大部分导航条样式以及交互动画,合理高效利用导航条资源。...6、不对外依赖 纯手工打造,未使用第三方库,不会对宿主造成依赖冲突,随时改动随时发布不存在版本控制,最大程度的降低和隔断对原生容器的版本依赖。...,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目 Q:若原生导航条隐藏...参考原生系统导航栏的绝对布局方案:@pango/navigation-bar把导航条拆分为状态栏和导航栏上下两部分, 导航条宽度屏幕自适应,导航条高度跟随设备变化,并采用大写的PX单位来固定元素尺寸。

    29140

    iOS开发常用之网络

    LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,可自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏和状态栏重叠。...RMParallax - RMParallax是一个应用程序启动页引导开源项目,除了细微的翻页视差效果,描述文本的过渡也非常美观(版本新特性,导航页,引导页)。...ADo_GuideView - 转动的用户引导页(模仿网易bobo)因为没有从应用程序包里抓到@ 3x的图片,建议在iPhone5模拟器运行,保证效果〜(版本新特性,导航页,引导页)。...支持block回调版本新特性,导航页,引导页)。 MZGuidePages - 自己写的通用导航页,可以直接引入工程使用,请参考案例(版本新特性,导航页,引导页)。...(版本新特性,导航页,引导页)。 ABCIntroView - ABCIntroView是一个易于使用的入门类,让你到达主屏幕之前介绍你的应用程序(版本新特性,导航页,引导页)。

    23.7K10

    浅谈用户体验的可视化

    我们且不说这种认识是否全面,甚至正确与否,那么问题已经来了那我们就从以下几个方面一并探讨这两个问题。 ? 1.内容引导 内容引导是一个站点最为重要的组成部分之一,而最为代表性的引导莫过于导航。...一个清晰的导航,就如同一本读物的目录,会为阅读和查找内容提供最直接的帮助。导航内容要简介、准确、清晰,快速引导用户到达目标位置。切勿繁慵杂乱,但极简的未必是好的。 ?...内容模块引导 ? 快捷引导挂件 ? 功能性右边栏 ? 3....对,针对很多网页用户爱好者,客户端这些软件对他们是免疫的;针对一些互联网初涉用户,他们对很多繁杂的操作是具有恐惧心理的,再加上现在客户端中加载很多强制安装的流氓插件,更是在用户心中产生不好的印象。...怎样让用户满意,我们除了华丽的包装,顺畅的操作外,完美引导的用户体验也是至关重要的一个环节。这也同时是现在我们所要克服的最大的问题。而我们也一直在为此默默奋斗着。。。 文章出自腾讯游戏TGideas

    77960

    小程序的UIUX设计与优化

    案例: 在设计小程序的首页时,可以使用清晰的导航栏、简洁的按钮和卡片式布局,使用户能够迅速理解页面结构。...懒加载:对于一些不需要立即显示的内容,可以采用懒加载策略,减少初次加载的内容量,提升页面的加载速度。...优化导航与信息架构 清晰的导航结构可以帮助用户更高效地找到所需信息。使用分类明确、层级清晰的菜单,可以让用户快速定位到目标页面。...Tab栏导航:适用于具有多个功能模块的小程序,底部的Tab栏能清晰地引导用户选择。侧边栏导航:适用于多层级、多内容的小程序,通过侧边栏展开详细的功能菜单。...合理的对比度、字体大小、颜色搭配能够引导用户的视觉焦点。 案例: 在电商小程序的商品详情页,商品价格、销量等关键信息应放在显眼的位置,并使用大号字体。

    16400

    如何利用动画效果来提升用户体验

    但不是冗长和完整的故事,而是简单的故事,比如“嗨,你现在该看这里了”或者“哇,你的操作完全正确。”然而,动效的目的不是为了愉悦用户,而是为了帮助理解操作会有什么进展亦或是提高用户使用APP的效率。...或许动画效果应用在广范围的背景来构建美学与功能的统一:动效能够影响用户行为,沟通状态,引导用户的注意力以及帮助用户看到自己动作的反馈。...1483798971732611.gif 这个例子里,动画用来引导眼镜去看屏幕的中心也就是音乐控件的位置。 另外一个例子,当按下浮动按钮的时候,加号就会变成一支笔。这说明笔是最主要的创作方式。...如果正确的数据允许登录,一个简单的“点头”的动画可以解释这一点。而水平的抖动可以用来表示未输入或者输入错误。当用户注意到动画的时候他们立刻就能明白这个动作的含义是什么。 ?...4.导航栏的过渡 导航栏的的转换是指app中导航菜单状态的变换。有不同级菜单之间和同级菜单之间的转换。我们要尽可能的减少那些令人意想不到的过渡效果。

    1.1K40

    带有桌面和推荐软件的 Raspberry Pi OS免费下载

    * 错误修复 - GTK+3:工具提示在屏幕底部显示不正确 * 错误修复 - lxpanel:在未安装放大镜时使用键盘快捷键启用放大镜时崩溃 * 错误修复 - lxpanel:连接到某些设备时蓝牙插件锁定...NVMe 设备兼容;现在针对 GTK+3 工具包构建 * 从 Raspberry Pi 配置中的 Raspberry Pi 4 中删除了复合视频选项 * 调整了 raspi-config 中的引导顺序选项以提高灵活性...* 推荐的软件现在基于 GTK+3 工具包构建 * 修复了使用键盘时音量插件崩溃的问题,可能会导致值超出范围 * 修复使用键盘导航目录视图时文件管理器中窗口之间的焦点更改 * 修复在启动向导中未正确读取...“位置”窗格,以简化视图显示已安装的驱动器;“新文件夹”图标添加到任务栏;目录浏览器中的扩展器现在可以正确显示子文件夹的状态 * 改进了多显示器支持 - 从上下文菜单启动时,第二个桌面上的图标对齐更正...,外观设置在正确的选项卡上打开 * Raspberry Pi 触摸屏与显示器正确对齐 * 在启动向导和推荐软件中安装新软件包之前同步系统时钟 * 混音器对话框添加到任务栏音量插件;单独的音频首选项应用程序已删除

    2.1K20

    微搭低代码从入门到精通10-tab栏组件

    那如何引导用户访问不同的页面呢?微搭中提供了tab栏组件来实现这个功能,本篇我们介绍一下这个组件的使用方法。...我比较喜欢使用的就是iconfont,里边有免费的素材可以下载 图片 选择好图标后,我们通常需要下载两种颜色的素材,一种是选中后的效果一种是未选中的效果 至于需要哪种颜色,通常需要学习一定的配色知识。...微搭提供了素材管理的功能,在我们应用编辑器的左侧导航栏找到素材的图标,进行上传 图片 tab栏组件的菜单内容需要在标签列表里维护 图片 如果你的功能是固定的,那么可以直接点击某个标签进行修改 图片 默认是从图标库里选择图标...,我们也可以使用自己的素材,点击内置样式,我们切换成自定义模式 图片 切换到自定义模式后就可以从素材库里直接选择素材了 图片 颜色搭配上我们通常选中选择一些亮色,未选中选择一些暗色。...在页面跳转时候还可以携带参数,通常我们的底部导航不建议携带参数,从产品规划上你不同的菜单是不同的业务,并不需要先从上一个页面选中某个参数带入到下一个页面中。

    74020

    16款值得一用的iPhone线框图模板 (PSD & Sketch)

    模板中标注了顶部导航栏、底部导航栏以及键盘高度的位置。无论是打印或复制粘贴到原型工具中使用都非常方便。可以说设计师非常贴心了。...这是一款专门为iPhone 7 准备的线框图模板,设计师同样标注了顶部导航栏、底部导航栏以及键盘高度的位置,可以直接打印出来做手绘原型或线框图设计。...在封面图中可以看到打印版线框图的正确用法。根据设计师制作的导航栏以及键盘的高度标记,使用者不必再花心思和时间测量项目高度以及各组件高度在线框图中应占的比例。...按惯例,图稿中标注了刘海屏以及头部信号栏,还有常规的各类导航相应的位置。文件中有横屏和竖屏的模板,可根据项目自由选择。...在Sketch文件中,包含四种模板: 带引导的纯线框 带引导和设备轮廓 带导向和设备遮罩 带引导和设备轮廓 同样也可以用B4和A4纸张尺寸打印,用于素描。

    2K20

    【小程序】全局配置window和tabBar

    设置导航栏的标题 4. 设置导航栏的背景色 5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 loading 的样式 9....设置导航栏的标题 设置步骤:app.json -> window -> navigationBarTitleText 需求:把导航栏上的标题,从默认的 “WeChat”修改为“黑马程序员”,效果如图所示...设置导航栏的背景色 设置步骤:app.json -> window -> navigationBarBackgroundColor 需求:把导航栏标题的背景 色,从默认的 #fff 修改为 #2b4b6b...设置导航栏的标题颜色 设置步骤:app.json -> window -> navigationBarTextStyle 需求:把导航栏上的标题颜色,从默认 的 black 修改为 white ,效果如图所示...设置上拉触底的距离 概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行 为。

    1.6K30

    Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单。...页面刷新出大坑 先前我们是将导航菜单和路由的加载放在菜单栏页面MenuBar.vue中,一切显示和路由也都正常,看起来没什么问题。然而当我们在非根据路径刷新页面时,问题出现了。...这样的地方也不少,像vue加载过程中的钩子函数,路由导航守卫函数等都可以,我们这里就选择在路由导航守卫的 beforeEach 函数内加载,保证每次路由跳转的时候都能够拥有动态菜单和路由。...addDynamicRoutes(temp, routes) } else { console.log(routes) } return routes } 当然,别忘了把要用到的几个东西引入进来,把导航菜单栏的代码清理一下...在 store 中添加菜单路由加载状态,避免页面未刷新而重复加载。 ? 修改路由配置,在加载之前判断加载状态,只有未加载的情况下才加载,并在加载之后保存加载状态。 ?

    2.5K30

    前端开发中如何优化用户体验

    视觉层次清晰:例如,Apple.com的网页设计,通过产品的摆放和文字的排版,引导用户的视线流动。2....直观易用的导航简洁导航栏:例如,Amazon.com的导航栏只包含最重要的几个类别,使得用户可以快速找到他们想要的内容。...面包屑导航:例如,Wikipedia.org使用面包屑导航帮助用户了解他们在网站中的位置。搜索功能:例如,Google.com的搜索功能,用户只需输入几个关键词就能找到他们想要的信息。...懒加载:例如,当用户滚动到页面底部时,再加载更多内容,这样可以减少网页的初始加载时间。2. 网络性能优化HTTP/2和HTTPS:例如,许多现代网站已经开始使用HTTP/2来提高加载速度和提高安全性。...五、实际案例分析案例:某电商平台首页优化该电商平台通过以下措施优化了首页的用户体验:界面布局优化:采用卡片式设计展示商品,清晰区分不同品类,增加搜索栏和分类导航的可见性。

    44810
    领券