一、点击加载更多有点像分页获取数据类似，下面是本人写的一个简单的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width" />

    <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="~/Content/Phone/css/list_css.css" rel="stylesheet" />

    <title>新闻列表</title>

</head>

<body>

    <div id="list-new">

    </div>

    <!--加载更多按钮-->

    <div class="js-load-more">加载更多</div>

<script src="~/Content/Phone/js/zepto.min.js"></script>

<script>

$(function(){

    /*初始化*/

    var counter = ; /*计数器*/

    var pageStart = ; /*offset*/

    var pageSize = ; /*size*/

    /*首次加载*/

    getData(pageStart, pageSize);

    /*监听加载更多*/

    $(document).on('click', '.js-load-more', function () {

        pageStart++

        getData(pageStart, pageSize);

    });

    function getData(offset,size){

        $.ajax({

            type: 'GET',

            url: '/PhoneManage/Notice/listJson?pageSize=' + size + '&pageIndex=' + offset, //这里offset,size无作用，仅方便调试

            dataType: 'json',

            success: function(reponse){

                var data = reponse;

                var sum = reponse.length;

                var result = '';

                /************业务逻辑块：实现拼接html内容并append到页面*****************/

                //console.log(offset , size, sum);

                for (var i = (offset -) * size; i < sum; i++) {

                    result += '<a href="/PhoneManage/Notice/text?id=' + data[i].F_Id + '"><div class="list"><div class="text"><h3>' + data[i].F_Title + '</h3><p>'

                            + data[i].F_CreatorTime + '</p></div><div class="back"><img src="/Content/Phone/images/back1.png" width="32" /></div></div></a>';

                }

                $('#list-new').append(result);

                /*******************************************/

                /*隐藏more*/

                if ((offset * size) > sum) {

                    $(".js-load-more").hide();

                }else{

                    $(".js-load-more").show();

                }

            },

            error: function(xhr, type){

                alert('Ajax error!');

            }

        });

    }

});

</script>

</body>

</html>

二、点击加载更多，需要注意是在原来数据的基础上加载出来新的数据，所以拼接html是关键

Jquery点击加载更多的更多相关文章

  1. jquery 点击加载更多

    html部分 <ul class="bill moreadd"> <div class="total"><span>-< ...

  2. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  3. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  4. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  5. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  6. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  8. android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

    android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多

  9. ajax点击加载更多数据图片（预加载）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Linux 后台运行python .sh等程序，以及查看和关闭后台运行程序操作

    1.运行.sh文件 直接用./sh 文件就可以运行,但是如果想后台运行,即使关闭当前的终端也可以运行的话,需要nohup命令和&命令. (1)&命令 功能:加在一个命令的最后,可以把这 ...

  2. JVM 内存模型及垃圾回收

    java内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 程序计数器:程序计数器是指CPU中的寄存器,它保存的是程序当前执行的指令的地址(也可以说 ...

  3. Spring Boot 发布 jar 包转为 war 包秘籍。

    Spring Boot是支持发布jar包和war的,但它推荐的是使用jar形式发布.使用jar包比较方便,但如果是频繁修改更新的项目,需要打补丁包,那这么大的jar包上传都是问题.所以,jar包不一定 ...

  4. 在使用python语言的open函数时，提示错误OSError: [Errno 22] Invalid argument: ‘文件路径’

    如题,在使用python语言的open函数时,提示错误OSError: [Errno 22] Invalid argument: '文件路径',在查阅了大量资料后也得到了一些解决方案,但是这些解决方案 ...

  5. 解决Eclipse建立Maven Web项目后找不到src/main/java资源文件夹的办法

    问题如题,明细见下图: 解决方法: 在项目上右键选择properties,然后点击java build path,在Librarys下,编辑JRE System Library,选择workspace ...

  6. 【左偏树】[LuoguP1456] Monkey King

    多...多组数据... awsl 死命的MLE,原来是忘记清空数组了.... 左偏树模板? 对于每一个操作,我们把两个节点$x,y$的祖先$fx,fy$找到,然后把他们的左右儿子分别合并 最后把$v[ ...

  7. vue中使用动画vue-particles实现背景粒子酷炫效果

    先来看我做的效果 我这个是用的背景色加上这个粒子效果实现的demo 平时我们做项目的话会添加背景图片这些,可能更加好看 看我的实现步骤 cnpm install -g vue-cli vue init ...

  8. jmeter做bbs作业时提示404错误

    在用jemter做bbs作业时候,注册成功后会跳转到主页,在写主页的脚本的时候,将fiddler抓到的url复制到路径下方“/bbs/forum.php”,但是第一次复制的时候在/bbs/forum. ...

  9. Excel生成Oracle数据库表sql工具类

    1.解决问题: 开发文档中字段比较多的时候,建表sql(Oracle下划线命名规范)比较麻烦,容易出错~~ (主要是懒) 特意手写一个工具,根据excel字段,生成建表的sql语句. ~~~末尾附Gi ...

  10. MaxCompute安全管理指南-案例篇

    通过<MaxCompute安全管理-基础篇>了解到MaxCompute和DataWorks的相关安全模型.两个产品安全方面的关联,以及各种安全操作后,本篇主要给出一些安全管理案例,给安全管 ...