Swift表格tableView上拉加载新数据的功能实现例子

对于表格(tableView)来说,下拉刷新数据、上拉加载数据应该是两个最常用的数据更新操作了。对于前者,我原来写过一篇相关的文章:Swift - 下拉刷新数据的功能实现(使用UIRefreshControl)。本次我来讲讲后者的实现。
说是上拉加载数据,其实就是当我们将表格内容滚动到最后一行时,系统就会自动获取新的内容并添加到列表尾部(具体效果可以参考百度贴吧的App)。下面我们通过一个小样例来演示上拉加载的实现。

1,样例效果图

(1)当初次进入程序时,先加载前20条数据。
(2)当 tableView 滚动条移到底部时,会看到表格底部有正在加载的提示,并继续加载接下来的20条数据。
(3)数据加载完毕后,会把新数据添加到表格底部。
(4)如果表格再次滚到底部,则循环上面的操作,继续加载新数据。


 

 

2,实现原理

(1)上拉加载的关键点在于判断何时开始加载新数据。这里我们在最后一条数据项显示出来的时候就自动开始加载。也就是当用户上拉表格,等到看到最后一条数据的时候就加载。
(2)同时我们在表格的 tableFooterView 中添加一个提示视图,用来告诉用户数据正在加载中。
(3)每次收到数据后,就将新数据并到本地的数据集合中,再调用 tableView的reloadData() 方法重新刷新下表格数据。
(4)这里要注意每次发起请求的时候要做个保护,保证在原来的请求没有返回时就不会发起新的请求。防止用户在最后一页来回滚动造成多次请求。
(5)实际的项目这些数据是通过网络请求的。这里就直接本地生成,并使用计时器加个延时,可以更好地看到效果。

3,完整代码

import UIKit
 
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
 
    //表格视图
    @IBOutlet weak var tableView: UITableView!
    
    //数据集合
    var dataArray = [String]()
    
    //表格底部用来提示数据加载的视图
    var loadMoreView:UIView?
    
    //计数器(用来做延时模拟网络加载效果)
    var timer: NSTimer!
    
    //用了记录当前是否允许加载新数据(正则加载的时候会将其设为false,放置重复加载)
    var loadMoreEnable = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.tableView.delegate = self
        self.tableView.dataSource = self
        
        //上拉刷新
        self.setupInfiniteScrollingView()
        self.tableView.tableFooterView = self.loadMoreView
        
        //首次加载数据
        loadMore()
    }
    
    //上拉刷新视图
    private func setupInfiniteScrollingView() {
        self.loadMoreView = UIView(frame: CGRectMake(0, self.tableView.contentSize.height,
            self.tableView.bounds.size.width, 60))
        self.loadMoreView!.autoresizingMask = UIViewAutoresizing.FlexibleWidth
        self.loadMoreView!.backgroundColor = UIColor.orangeColor()
        
        //添加中间的环形进度条
        let activityViewIndicator = UIActivityIndicatorView(activityIndicatorStyle: .White)
        activityViewIndicator.color = UIColor.darkGrayColor()
        let indicatorX = self.loadMoreView!.frame.size.width/2-activityViewIndicator.frame.width/2
        let indicatorY = self.loadMoreView!.frame.size.height/2-activityViewIndicator.frame.height/2
        activityViewIndicator.frame = CGRectMake(indicatorX, indicatorY,
                                                 activityViewIndicator.frame.width,
                                                 activityViewIndicator.frame.height)
        activityViewIndicator.startAnimating()
        self.loadMoreView!.addSubview(activityViewIndicator)
    }
    
    // 返回记录数
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArray.count;
    }
    
    //单元格数据设置
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)
        -> UITableViewCell {
        //设置单元格数据
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)
        cell.textLabel?.text = self.dataArray[indexPath.row]
        
        //当下拉到底部,执行loadMore()
        if (loadMoreEnable && indexPath.row == self.dataArray.count-1) {
            loadMore()
        }
        
        return cell
    }
    
    //加载更多数据
    func loadMore(){
        print("加载新数据!")
        loadMoreEnable = false
        timer = NSTimer.scheduledTimerWithTimeInterval(2.0, target: self,
                    selector: #selector(ViewController.timeOut), userInfo: nil, repeats: true)
    }
    
    //计时器时间到
    func timeOut() {
        let start = self.dataArray.count + 1
        //随机添加10条新数据(时间是当前时间)
        for i in start..<start+20 {
            self.dataArray.append("新闻标题\(i)")
        }
        self.tableView.reloadData()
        loadMoreEnable = true
        
        timer.invalidate()
        timer = nil
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

时间: 2024-12-30 03:00:28

Swift表格tableView上拉加载新数据的功能实现例子的相关文章

jquery实现瀑布流效果 jquery下拉加载新数据_javascript技巧

瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢.今天我就来记录一下关于用jquery实现瀑布流效果的代码: 一.页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item: 2. tips是页面加载数据的时候用来提示用户的文本: <div class="wrapper"> <div class="items"> <div class="item"></div> &l

ios-iOS MJrefresh 关于上拉加载怎么判断已经加载完毕

问题描述 iOS MJrefresh 关于上拉加载怎么判断已经加载完毕 iOS MJrefresh 关于上拉加载怎么判断已经加载完毕,我的一直上拉加载,显示null,不要就重复上面的 解决方案 http://download.csdn.net/detail/u012113447/8325615 解决方案二: 如果上拉加载的数据是最后一组,也就是再去上拉加载已经没数据了,那么就关闭上拉加载功能,下面就会显示没有很多数据且不能上拉加载,MJ里面有这个关闭的功能的,接口在github说明里就有,你往下

iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码_IOS

废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

Android ListView实现上拉加载更多和下拉刷新功能_Android

本文实例为大家介绍了Android ListView下拉刷新功能的实现方法和功能,供大家参考,具体内容如下 1.ListView优化方式 界面缓存:ViewHolder+convertView分页加载:上拉刷新图片缓存快速滑动ListView禁止刷新 2.效果 3.上拉加载更多原理及实现 当我们手指滑动到listview最后位置的时候,我们触发加载数据的方法.这触发之前我们需要做一些工作,包括: 如何判断滑动到最后? 如何避免重复加载数据? 加载之后如何刷新界面? 1).界面实现AbsListV

上拉加载下拉刷新控件WaterRefreshLoadMoreView

上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on 13-9-18. // #import <UIKit/UIKit.h> #define kStartTo 0.7f #define kEndTo 0.15f #define kAnimationInterval (1.0f / 50.0f) NS_INLINE CGFloat distansBet

仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙

仿百度壁纸客户端(四)--自定义上拉加载实现精选壁纸墙 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 仿百度壁纸客户端(三)--首页单向,双向事件冲突处理,壁纸列表的实现 仿百度壁纸客户端(四)--自定义上拉加载实现精选壁纸墙 仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 仿百度壁纸客户端(六)--完结篇之Ga

上拉记载-上拉加载下拉刷新refresher v2.0

问题描述 上拉加载下拉刷新refresher v2.0 5C 现在支持一个页面多个调用,这句话是什么意思啊,假如我一个页面里有一个大的div,里面有四个小的div,怎么实现让这四个小的div都可以下拉刷新,上拉加载呢× 解决方案 http://www.jq22.com/jquery-info4469 解决方案二: 上拉加载 下拉刷新iOS中tableView的下拉刷新与上拉加载(一)PullToRefreshListView下拉刷新与上拉加载

ios-iOS 关于MJRefresh上拉加载问题

问题描述 iOS 关于MJRefresh上拉加载问题 我想问你一个关于 MJRefresh这个上拉下拉的问题 就是 我有几个tableview 第一个创建对象后上拉下拉都可以 第二个创建对象后就只有下拉可以 上拉始终进不到上拉加载的那个方法了 这是为什么 解决方案 MJRefresh 我以前也用过,没有发现这样的问题,如果你是同时有多个 tableView,那么一个 tableView 对应 一个 MJRefresh 就肯定正常的 可能是你在一个控制器中创建了多个 tableView,导致 MJ

Android 仿硅谷新闻下拉刷新/上拉加载更多_Android

1.添加加载更多布局 1_初始化和隐藏代码 在RefreshListView构造方法中调用 private void initFooterView(Context context) { View footerView = View.inflate(context, R.layout.refresh_listview_footer, null); //隐藏代码 footerView.measure(0, 0); int footerViewHeight = footerView.getMeasur