美文网首页
简单实现类似于支付宝首页刷新的操作

简单实现类似于支付宝首页刷新的操作

作者: 守候的流年 | 来源:发表于2018-11-14 11:00 被阅读14次

简单实现类似于支付宝首页刷新的操作


支付宝首页刷新效果分析了一下,这样做的目的是为了保证用户在刷新的时候顶部不留刷新空白使得界面美观,在上拉加载更多的时候头部随着界面的上拉隐藏,保证用户在浏览内容的时候有更多的空间去展示内容。

其实说起来就是很简单
1, 就是在 tableView 上面添加一个 backView 在滑动的时候修改使 backView 的 frame 不变

效果图:


效果图.gif

具体在下面代码:


import UIKit
import MJRefresh

let SRNW = UIScreen.main.bounds.size.width
let SRNH = UIScreen.main.bounds.size.height


class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    lazy var backView : UIView = {
        let backView = UIView.init(frame: CGRect(x: 0, y: 0, width: SRNW, height: 200))
        backView.backgroundColor = UIColor.orange
        
        let btn = UIButton.init(type: UIButton.ButtonType.custom)
        btn.backgroundColor = UIColor.blue
        btn.setTitle("0", for: UIControl.State.normal)
        btn.frame = CGRect.init(x: 0, y: 160, width: SRNW, height: 60)
        btn.addTarget(self, action: #selector(btnAction(_:)), for: UIControl.Event.touchUpInside)
        backView.addSubview(btn)
        
        
        return backView
    }()
    
    
    lazy var tableView : UITableView = {
        let tv = UITableView.init(frame: self.view.bounds, style: UITableView.Style.plain)
        
        tv.delegate = self
        tv.dataSource = self
        
        self.view.addSubview(tv)
        return tv
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        
        initUI()
        
    }
    @objc func btnAction(_ sender:UIButton) {
        print("点击了btn")
        let idx = Int(sender.titleLabel?.text ?? "0")
        sender.setTitle("\((idx ?? 0) + 1)", for: UIControl.State.normal)
    }
    func initUI() {
                
        self.tableView.addSubview(backView)
        self.tableView.bringSubviewToFront(backView)
        
        let headerView = UIView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 200))
        headerView.backgroundColor = UIColor.clear
        headerView.alpha = 0
        
        self.tableView.tableHeaderView = headerView
        
        self.tableView.mj_header = MJRefreshNormalHeader.init(refreshingBlock: {
            
            DispatchQueue.main.asyncAfter(deadline: .now() + 1, execute: {
                self.tableView.mj_header.endRefreshing()
            })
        })
        
        self.tableView.mj_header.ignoredScrollViewContentInsetTop = -200.0
        
        self.tableView.mj_footer = MJRefreshBackNormalFooter.init(refreshingBlock: {
            DispatchQueue.main.asyncAfter(deadline:  .now() + 1, execute: {
                self.tableView.mj_footer.endRefreshing()
            })
        })
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         return 100
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: "cellID")
        
        if cell == nil {
            cell = UITableViewCell.init(style: UITableViewCell.CellStyle.default, reuseIdentifier: "cellID")
        }
        cell!.textLabel?.text = "\(indexPath.row)"
        
        return cell!
        
    }
}
extension ViewController : UIScrollViewDelegate {
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        if offsetY <= 0 {
            backView.frame = CGRect(x: 0, y: offsetY, width: SRNW, height: 220)
            
        } else {
            
        }
    }
    
}


相关文章

网友评论

      本文标题:简单实现类似于支付宝首页刷新的操作

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