手机页面分页加载更多

Html

<div class="load-more" id="load-more"><div class="loading"></div></div>

JS

var isLoading = false;
var loadMoreTarget = $("#load-more");
var listTarget = $("#list");

listTarget.on("scroll", function(){
    var scrollTop = $(this).scrollTop();
    var height = $(this).height();
    var scrollHeight = $(this).get(0).scrollHeight;
    var h = scrollHeight - height - scrollTop;
    if(h < 100 && !isLoading){
        //loadMore();
    }
});

CSS

.load-more{
    height:50px;
    width: 100%;
}

.loading{
    overflow-y: auto;
    padding: 0px;
    height: 50px;
    width:40px;
    margin:0px auto;
    background: url(../images/loading.gif) no-repeat center 9px;
}
时间: 2024-10-10 16:57:56

手机页面分页加载更多的相关文章

Wordpress无限Ajax分页加载更多文章

今天在Github上找东西的时候发现了一个叫做 Infinite AJAX Scroll 的项目,看到它通过很简单的设置,就可以让Wordpress支持分页Ajax无线加载功能.测试了下非常好用,现在分享给大家~ 下面以Wordpress自带主题 Twenty Twelve 主题为例: 第1步: 把 jquery-ias.min.js 拷贝到 wp-content/themes/twentytwelve/js 文件夹下. 第2步: 在编辑器中打开 wp-content/themes/twenty

手机页面滑动加载数据

var $doc, $win, bind; $doc = $(document); $win = $(window); bind = function() { return $('.js-scroll-load').each(function() { var $self, scroll, top; $self = $(this); $self.removeClass('js-scroll-load'); top = $self.offset().top - 300; $win.on('scrol

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果

由于手机的携带的方便性和手机的越来越智能和移动网速越来越快,手机已经充斥着人们的生活.随着手机的流行, 移动应用也快速的火了起来比如微商城.手机网页.移动APP等等.既然移动应用这么火,我们今天来讲一下怎样实现在移 动网页中动态加载数据,那么我们怎么实现呢,是像pc网页那样,有个上一页和下一页还是其它的方式. 其实像pc网页那样上一页和下一页肯定不行的,手机屏幕很小,不好点击同时用户体验很差,今天来给大家介绍使用 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式

Android Demo之旅 ListView底部添加加载更多按钮实现数据分页

在我们的实际项目中,数据应该说是很多的,我们的ListView不可能一下子把数据全部加载进来,我们可以当滚动条滚动到ListView的底部的时候,给一个更多的提示,当我们点击它即加载下一页的数据,相当与我们的分页效果,参考网上的东西,写了一个小小的demo,并总结了一些知识点,功能图如下:    源代码下载地址:http://download.csdn.net/detail/harderxin/7762625 掌握知识点: 1)自定义Adapter,将数据和ListView绑定起来 2)理解La

分页查询时,当元素可以删除时,加载更多的处理办法

大部分情况下,分页查询时,在页面展示的元素是没有删除操作的.而今天遇到的一个情况是,分页查询出来的元素,用户是可以进行删除操作的.如果不进行处理,用户每删除一个元素,加载更多显示出来的元素就会减少一个. 目前所采用的方法是,用户每删除一个元素时,如果total > size 时,就给它追加一个.加载更多那不需要进行任何处理 js代码如下: $li.remove();total–;if(total >= kk_coll.config.pageSize * kk_coll.config.pageI

微信小程序页面事件-下拉刷新,上拉加载更多

1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小程序启动下拉刷新: 两种方式: 1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

【iOS开发-62】自定义cell制作团购页面、顶部图片轮播、底部模拟加载更多功能,核心是练习代理模式

(1)效果 (2)案例源代码免费下载 团购页面+iOS源代码+头部广告轮播+底部加载更多 (3)补充 在源代码中,有一处瑕疵:就是因为是单线程,所以在上下拖动页面的时候,上面的图片轮播会停止.所以我们需要兼顾,解决方案,把定时器加到当前的runLoop中. 即在WPTgHeaderView.m的playOn方法中添加一行代码: -(void)playOn{ timer=[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector