JXPagingView-实现类似微博、简书主页效果的视图组件

JXPagingView-实现类似微博、简书主页效果的视图组件

一、项目简介

JXPagingView是一个功能丰富的视图组件，它能够实现类似微博主页、简书主页、QQ联系人页面等的效果。在这个组件中，可以进行多页面嵌套，支持上下滑动以及左右滑动来切换页面，并且提供了如HeaderView悬浮、下拉刷新、上拉加载更多等实用功能。

二、功能特点

• 支持OC与Swift两种编程语言。
• 支持列表懒加载，即等到列表真正显示的时候才加载，而不是一次性加载所有列表。
• 支持首页下拉刷新、列表视图下拉刷新、列表视图上拉加载更多等多种刷新和加载方式。
• 支持悬浮SectionHeader的垂直位置调整。
• 支持从顶部用力往上滚动时下面的列表会跟着滚动（需使用JXPagerSmoothView类）。
• 列表封装简洁，只要遵从JXPagingViewListViewDelegate协议即可，UIView、UIViewController等都适用。
• 使用JXCategoryView/JXSegmentedView分类控制器，几乎支持所有主流效果、高度自定义、可灵活扩展。
• 支持横竖屏切换。
• 支持点击状态栏滚动当前列表到顶部。
• 支持列表显示和消失的生命周期方法。
• 可以通过isListHorizontalScrollEnabled属性控制列表是否可以左右滑动，默认值为YES。
• 支持FDFullscreenPopGesture等全屏手势兼容处理。

三、使用示例

1. 初始化相关视图（以OC为例）

首先要初始化JXCategoryTitleView和JXPagerView。例如：

self.categoryView = [[JXCategoryTitleView alloc] initWithFrame:frame];
//配置categoryView，细节参考源码
self.pagerView = [[JXPagerView alloc] initWithDelegate:self];
[self.view addSubview:self.pagerView];
//将pagerView的listContainerView和categoryView.listContainer进行关联，这样列表就可以和categoryView联动了。
self.categoryView.listContainer = (id<JXCategoryViewListContainer>)self.pagerView.listContainerView;

2. 实现JXPagerViewDelegate协议

需要实现如返回tableHeaderView的高度、tableHeaderView、悬浮HeaderView的高度、悬浮HeaderView、列表的数量以及根据索引初始化对应列表实例等方法。例如：

//返回tableHeaderView的高度，因为内部需要比对判断，只能是整型数
-(NSUInteger)tableHeaderViewHeightInPagerView:(JXPagerView)pagerView{
    return JXTableHeaderViewHeight;
}
//返回悬浮HeaderView
-(UIView)viewForPinSectionHeaderInPagerView:(JXPagerView)pagerView{
    return self.categoryView;
}
//返回列表的数量
-(NSInteger)numberOfListsInPagerView:(JXPagerView)pagerView{
    //和categoryView的item数量一致
    return self.titles.count;
}
//根据index初始化一个对应列表实例。注意：一定要是新生成的实例！！！只要遵循JXPagerViewListViewDelegate即可，无论你返回的是UIView还是UIViewController都可以。
-(id<JXPagerViewListViewDelegate>)pagerView:(JXPagerView)pagerView initListAtIndex:(NSInteger)index{
    TestListBaseViewlistView = [[TestListBaseView alloc] init];
    if (index == 0) {
        listView.dataSource = @[@"橡胶火箭",@"橡胶火箭炮",@"橡胶机关枪"...].mutableCopy;
    } else if (index == 1) {
        listView.dataSource = @[@"吃烤肉",@"吃鸡腿肉",@"吃牛肉",@"各种肉"].mutableCopy;
    } else {
        listView.dataSource = @[@"【剑士】罗罗诺亚·索隆",@"【航海士】娜美",@"【狙击手】乌索普"...].mutableCopy;
    }
    [listView beginFirstRefresh];
    return listView;
}

3. 实现JXPagerViewListViewDelegate协议

列表可以是任意类（UIView、UIViewController等），只要实现了该协议就行，并且要注意scrollCallback的正确回调。例如：

//返回listView。如果是vc包裹的就是vc.view；如果是自定义view包裹的，就是自定义view自己。
-(UIView)listView{
    return self;
}
//返回listView内部持有的UIScrollView或UITableView或UICollectionView主要用于mainTableView已经显示了header，listView的contentOffset需要重置时，内部需要访问到外部传入进来的listView内的scrollView
-(UIScrollView)listScrollView{
    return self.tableView;
}
//当listView内部持有的UIScrollView或UITableView或UICollectionView的代理方法`scrollViewDidScroll`回调时，需要调用该代理方法传入的callback
-(void)listViewDidScrollCallback:(void(^)(UIScrollView))callback{
    self.scrollCallback = callback;
}

四、项目总结

JXPagingView为开发者提供了一个方便创建类似微博、简书等主页效果的解决方案，其丰富的功能和相对灵活的使用方式能够满足多种需求。如果你对这个项目有任何疑问或者建议，欢迎在下方留言参与讨论。

项目地址

GitHub链接直达