美文网首页
封装股票代码行情首页(侧滑效果)

封装股票代码行情首页(侧滑效果)

作者: Qing学 | 来源:发表于2017-11-19 20:49 被阅读0次

    本人因为工作需要需要做一个行情页面。需要达到的效果为TableView可以整体进行刷新。但是在每个cell上还需要左侧固定,然后右侧实现同步左右滑动。刚开始并没有思路。通过reveal查看了东方财富的布局之后找到了灵感。
    实现思路:
    1.可以刷新(建立一个TableView集成MJRefresh)。
    2.左侧固定,右侧可以独立刷新。(我们可以具体到每个cell上。利用scollView在cell右侧加一个scrollView,左侧是一个固定的label。然后对每个cell的scrollView进行刷新的时候。将tableView所有显示的cell上的ScrollView偏移相同的偏移量即完成。话不多说。下面上布局截图
    1.先创建一个tableView并且显示cell

    self.tableView.delegate = self;
        self.tableView.dataSource = self;
    TableView创建在在StoryBoard上
    
    BaseTableViewCell *baseCell = [self.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([BaseTableViewCell class]) forIndexPath:indexPath];
        baseCell.controller = self;
        baseCell.baseTableView = self.tableView;
    复用取得cell,然后给cell的tableView指针 (weak)指向自己的tableView
    

    2.线面是cell的布局


    Snip20171119_5.png

    可以看到cell左侧是label、右侧是一个可以滑动的scrollView;
    然后在scrollView上添加上Label

    self.qxScrollView.contentSize = CGSizeMake(500, 0);
        self.qxScrollCell = [[[NSBundle mainBundle]loadNibNamed:@"QXScrollViewCell" owner:self options:nil]firstObject];
        self.qxScrollCell.frame = CGRectMake(0, 0, 500, 50);
        [self.qxScrollView addSubview:self.qxScrollCell];
        self.qxScrollView.delegate = self;
    

    3.cell已经可以滑动了。现在的问题只能显示单个cell的滑动。所以利用cell上weak指针取得tableView,并且给tableView所有显示的cell上的scrollView设置相同的contentOffset。

    for (BaseTableViewCell *cell in self.baseTableView.visibleCells){
            cell.qxScrollView.contentOffset = scrollView.contentOffset;
            self.controller.tableViewContentOffset = scrollView.contentOffset;
        }
    

    4.已经完成cell的同步滑动。但是tableView向下滑动的时候,新刷新出来的cell的偏移量并没有得到改变,所以还需要在tableView滑动的时候设置每个新显示的cell的偏移量。
    代码如下:

    baseCell.qxScrollView.contentOffset = self.tableViewContentOffset;
    

    到此所有效果完成,每个cell左侧固定,右侧的scrollView滑动可以带动当前显示的所有cell的ScrollView同步滑动。tableView新复用的cell偏移量也OK。
    githubDemo地址:
    https://github.com/wangqingxue/QXScrollTableView
    感谢观看。

    相关文章

      网友评论

          本文标题:封装股票代码行情首页(侧滑效果)

          本文链接:https://www.haomeiwen.com/subject/bjvpvxtx.html