电商分类页实现
前言:商品分类页几乎涵盖了所有电商App,实现的方法有很多,今天分享一个在我当前项目应用的实现方法。
先看效果图
image.png思路分析:左边是一个索引
tableview
右边是一个展示collectionView
,通过点击左侧tableview
来计算当前点击的index
,然后计算偏移量。
- (void)leftTableViewOffsetWithIndexPath:(NSIndexPath *)indexPath
{
//判断点击的cell是否靠近底部,或顶部,是则偏移指定位移
CGRect rect = [self.leftTableView rectForRowAtIndexPath:indexPath];
CGFloat total_offset = self.leftTableView.contentSize.height - self.leftTableView.mj_h;//总偏移
NNHWeakSelf(self);
//50为cell高度,乘以3表示点击下面三个时偏移
if (rect.origin.y - self.leftTableView.mj_offsetY >= self.leftTableView.mj_h - 50 * 3 - 1) {
CGFloat contentOffset_y = self.leftTableView.mj_offsetY + 50 * 3;
if (total_offset - self.leftTableView.mj_offsetY < 50 * 3) {
//判断ios 11直接设置偏移无效,我也没弄懂,必须延时才有效
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[weakself.leftTableView setContentOffset:CGPointMake(0, total_offset) animated:YES];
});
}
else
{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[weakself.leftTableView setContentOffset:CGPointMake(0, contentOffset_y) animated:YES];
});
}
}
//50为cell高度,乘以3表示点击上面三个时偏移
else if (rect.origin.y - self.leftTableView.mj_offsetY < 50 * 3)
{
CGFloat contentOffset_y = self.leftTableView.mj_offsetY - 50 * 3;
if (self.leftTableView.mj_offsetY < 50 * 3) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[weakself.leftTableView setContentOffset:CGPointMake(0, 0) animated:YES];
});
}
else
{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[weakself.leftTableView setContentOffset:CGPointMake(0, contentOffset_y) animated:YES];
});
}
}
}
附上github地址 各位老爷觉得还不错记得给个star。
网友评论