模拟京东商城实现导航条隐藏功能

模拟京东商城实现导航条隐藏功能,第1张

1导航条隐藏功能
2界面向上滚动的时候,导航条隐藏
3界面向下滚动的时候,导航条显示

层次结构分析:

层级结构分析:

思路①:使用图中 - 原谅色的View - 导航条View - 替代navigationBar

==>问题出现 - 这种整个导航条View隐藏的时候,顶部时间View也隐藏了!不符合要求

思路②顶部分成三个模块部分相互独立:

①界面上移的时候 - 导航View隐藏:

①界面上移的时候 - 隐藏的导航View显示:

思路1:tableVIew本质是scrollview,判断scrollview的滚动方向,通过contentOffset

思路2:

a隐藏系统默认的导航条View,然后自定义和导航条一模一样的UIView上去
[selfnavigationController setNavigationBarHidden:YES];

btableView添加KVO监听滑动方向
[_tableView addObserver:self forKeyPath:NSStringFromSelector(@selector(contentOffset)) options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];

c通过观察者监听值的变化

c在向上滚动的时候 - 设置导航条隐藏 + View上移

d在界面向下滚动的时候 - 设置导航条View显示 + View下移

Demo展示:



demo中的View都在同一个界面,可以直接在 observeValueForKeyPath 方法中,直接通过 UIView的成员变量改View的状态,但是如果跨控制器呢?

如图:此界面的顶部三个按钮,分别对应响应的三个控制器[‘全部’,‘测试1’,‘测试2’],控制器结构分析:


==>思路:


tableView控制器,还是一样通过KVO监听tableView的contentOffSet,然后在 observeValueForKeyPath 方法中,由于无法直接控制外部VC的界面属性,所以通过代理传值,告诉外部控制器,界面要发生的变化

原理其实和同一个控制器里面改变UIView的属性一样,只是这里跨了控制器,无法拿到属性,所以是通过代理传值告诉外部的那个控制器做出相应的改变而已,本质核心不变。


所以界面变化的步骤应该如下:

如图所示,要添加判断,如果导航条已经隐藏了,按钮View 和 tableView就不要再一直往上跑了,最多就上移一个View的位置就够了,所以要添加判断;

如果是在同一个控制器中,可以添加 - _navigationViewhidden 属性判断

但是这里是跨控制器的,_navigationView属性是在外部控制器上,而不是在tableView的控制器上,所以拿不到!

同理:向下滚动的时候也要添加判断


bug说明:如图,只要一使用下拉刷新,就自动调用 - 导航条View隐藏 并且 外部控制器上移效果

下拉刷新的时候,本质上也是拖动tableView,一样会进tableView的监听方法!

项目需求:下拉刷新的时候,不要和gif显示的一样,导致导航条隐藏并使得界面上移!

解决方案 :

如图,我们发现,下拉的时候,跑出来的 mj_headerView - 高度54,就等于,直接让tableView的contentOffsety = 54了!

最终效果演示:

demo地址~

前台类目:对于用户来说,通过类目可以为帮助他们快速地筛选商品,从而找到心仪的物品;后台类目:对于平台来说,可以高效地管理商品体系,为运营人员多样化类目运营提供基础支撑;
后台类目是将商品进行统一和标准化管理,主要是商家和平台运营的使用。商家在发布商品时,他们第一步要选择先对应的后台类目,要注意的是商品必须挂载在叶子类目上。然后再填写商品的组合好的基本属性和销售等信息。
因为这些属性都是挂在类目上,不同类目下挂载的属性可能都不一样。
运营同学则负责类目的日常管理,包含类目的增删改查、基础属性挂载、销售属性挂载、品牌挂载,设置继承关系等等。关于属性挂载类目相关内容,本篇不做展示,下一篇再详细给大家介绍。
运营同学在配置类目过程中,尽量考虑周全,避免后期的频繁修改和删除类目,尤其是已在叶子类目下挂有商品的就更不能随便被删除了。
前台类目面向用户,方便用户筛选查找商品。大部分时候用户见到的类目都是前台类目,前台类目可分为PC端和移动端。不管是PC端还是移动端,前端分类大多数情况都是二到三级为宜。后台类目的配置相对来说比较“死板”,而前台类目运营同学可以按照业务场景和用户购物习惯等维度进行多样化配置,来满足不同的需求。


DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
乐在赚 » 模拟京东商城实现导航条隐藏功能

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情