很多app中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见mjrefresh和egotableviewpullrefresh),用起来很方便，但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统ui的基础上做出来.
下面通过jquery手机端上拉下拉刷新页面代码，很像qq空间客户端或者微信下拉刷新页面特效代码。
请看下面效果图：
在线预览    源码下载
html代码：
row row row row row row row row row row

下拉刷新和上拉加载更多原理详解，具体介绍通过代码分析。
代码如下：
// 下拉刷新的原理 - (void)scrollviewwillbegindecelerating:(uiscrollview *)scrollview { if (scrollview.contentoffset.y * scrollview一开始并不存在偏移量,但是会设定contentsize的大小,所以contentsize.height永远都会比contentoffset.y高一个手机屏幕的 * 高度;上拉加载的效果就是每次滑动到底部时,再往上拉的时候请求更多,那个时候产生的偏移量,就能让contentoffset.y + 手机屏幕尺寸高大于这 * 个滚动视图的contentsize.height */ if (scrollview.contentoffset.y + scrollview.frame.size.height >= scrollview.contentsize.height) { nslog(@%d %s,__line__,__function__); [uiview commitanimations]; [uiview animatewithduration:1.0 animations:^{ // frame发生的偏移量,距离底部往上提高60(可自行设定) self.tableview.contentinset = uiedgeinsetsmake(0, 0, 60, 0); } completion:^(bool finished) { /** * 发起网络请求,请求加载更多数据 * 然后在数据请求回来的时候,将contentinset改为(0,0,0,0) */ }]; } }
以上内容就是本文针对jquery模拟原生态app上拉刷新下拉加载更多页面及原理详解，希望对大家有所帮助。